<template>
  <div>
    <div v-if="skipShow" class="skipBtn" @click.stop="skipFun">跳过</div>
    <canvas v-if="whoFirst" class="markCanvas" id="markCanvas"></canvas>
    <div
      class="immediatelyClass"
      v-show="immediatelyShow"
      @click.stop="immediatelyClick"
    >
      <div class="arrowAll">
        <img class="arrowAllLeft" :src="VITE_BASE_PUBLICPATH + '/img/cockpit/arrowLeft.png'" />
        <img class="arrowAllRight" :src="VITE_BASE_PUBLICPATH + '/img/cockpit/arrowRight.png'" />
      </div>
      <img
        style="
          position: absolute;
          z-index: 1000;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        "
        :src="VITE_BASE_PUBLICPATH + '/img/cockpit/enterImmediately.png'"
      />
    </div>
    <!--  v-show="whoFirst2" -->
    <div class="cockpit">
      <div v-if="isWarning" class="warningTop"></div>
      <div v-if="isWarning" class="warningLeft"></div>
      <div v-if="isWarning" class="warningRight"></div>
      <div v-if="isWarning" class="warningBottom"></div>
      <Header class="cockpit-header" :single="true" />
      <el-tooltip effect="dark" content="图标说明" placement="bottom">
        <el-button
          class="toHelp"
          :class="{ isSmall }"
          @click.stop="requestHelp"
        ></el-button
      ></el-tooltip>
      <el-tooltip effect="dark" :content="fullTitle" placement="bottom">
        <el-button
          class="toFull"
          :class="{ isSmall, isFull }"
          @click.stop="requestFullScreen"
        ></el-button
      ></el-tooltip>
      <el-tooltip effect="dark" content="双倍屏" placement="bottom">
        <el-button
          class="toDub"
          :class="{ isSmall }"
          @click.stop="changeDub"
        ></el-button
      ></el-tooltip>
      <el-tooltip effect="dark" content="返回管理系统" placement="bottom">
        <el-button
          class="toHome"
          :class="{ isSmall }"
          @click.stop="backToHome"
        ></el-button>
      </el-tooltip>

      <div id="cesiumContainer"></div>
      <!--    双屏驾驶舱-->
      <div class="cockpit-left"></div>
      <div class="cockpit-right"></div>
      <div class="compass" v-if="compassShow"></div>
      <Footer2
        class="cockpit-footer"
        @waringClick="waringClick"
        @flyPlanClick="flyPlanClick"
        :isSmall="isSmall"
        @footerHide="footerHide"
      />

      <!-- 普通弹窗 -->
      <Card
        id="cardID"
        :visible="dialogVisible"
        :title="title"
        :content="content"
        :typeCard="typeCard"
        @visibleClose="visibleClose"
        @drawLine="curPlaneLine"
        @removeLine="removeCurPlaneLine"
        :single="true"
        v-drag
      />
      <!-- 飞机、飞手信息弹窗 -->
      <Tabs
        v-drag
        id="tabCard"
        ref="tabs"
        @drawLine="addCurUAVLine"
        @removeLine="removeCurUAVLine"
        @drawAirspace="addCurAirspace"
        @removeAirspace="removeCurAirspace"
        @showWaringTabs="showWaringTabs"
        @videoPlay="videoPlayFun"
        @changeIsShowDetail="changeIsShowDetail"
        :single="true"
      />
      <!--   视屏流   -->
      <VideoStreaming
        ref="videoStreamRef"
        @closeVideoCard="closeVideoCard"
        :visible="videoStreamVisible"
      />

      <!-- 飞行计划弹窗 -->
      <ManagerTabs
        title="飞行计划"
        ref="flyingTabsRef"
        :visible="managerTabsVisible"
        @ManagerTabsExpand="ManagerTabsExpand"
        @managerVisibleClose="managerVisibleClose"
        @changeIsShowDetail="changeIsShowDetail"
        :single="true"
      />
      <!-- 预警事件弹窗 -->
      <WarningTabs
        title="报警事件"
        ref="waringTabsRef"
        :visible="waringVisible"
        @waringExpand="waringExpand"
        @WarningVisibleClose="WarningVisibleClose"
        @changeIsShowDetail="changeIsShowDetail"
        :single="true"
      />
      <!-- 报警事件组建 -->
      <AlarmTabs :single="true" v-drag />
      <!-- 今日报警数量统计 -->
      <NumberCenter :single="true" />
      <!-- 右侧工具栏 -->
      <ToolTab
        @flyPlanClose="flyPlanClose"
        @waringClose="waringClose"
        @ranging="ranging"
        @heightSearch="heightSearch"
        @defaultPerspect="defaultPerspect"
        @waringShowView="waringShowView"
        @waringShowViewClose="waringShowViewClose"
        :isSmall="isSmall"
        :footerIsShow="footerIsShow"
        ref="childComponentRef"
      />
      <!-- 高度搜索 -->
      <HeightSearch @heightSearch="heightSearch" :single="true" />
      <!-- 今日报警数量 -->
      <TodayWaring :single="true" />
      <!-- 今日侦测架次 -->
      <TodaySorties :single="true" />
      <!-- 点击预警演示后显示的弹窗 -->
      <div
        v-drag
        id="waringShowViewClass"
        class="waringShowViewClass"
        v-if="isWaringShow"
        @click.stop
      >
        <!-- 一级预警 -->
        <div
          class="waringShowViewClass-item"
          :class="{ active: classificationsshow == 1 }"
          @click="handlerclassification(1)"
        >
          一级预警
          <span class="item-img"
            ><img
              :src="VITE_BASE_PUBLICPATH + '/img/cockpit/topdown.png'"
              alt=""
              v-if="classificationsshow == 1" />
            <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/lowdown.png'" alt="" v-else
          /></span>
        </div>
        <el-checkbox-group
          v-model="checkWaring"
          @change="handleCheckAllChange"
          class="groupstyle"
          v-if="classificationsshow == 1"
        >
          <el-checkbox
            v-for="item in managelist"
            :label="item.value"
            :key="item.label"
            size="large"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <!-- 二级预警 -->
        <div
          class="waringShowViewClass-item"
          :class="{ active: classificationsshow == 2 }"
          @click="handlerclassification(2)"
        >
          二级预警
          <span class="item-img"
            ><img
              :src="VITE_BASE_PUBLICPATH + '/img/cockpit/topdown.png'"
              alt=""
              v-if="classificationsshow == 2" />
            <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/lowdown.png'" alt="" v-else
          /></span>
        </div>
        <!--  :max="1" 用来禁用单选-->
        <el-checkbox-group
          v-model="checkWaring"
          :disabled="clickWaringDis"
          @change="handleCheckAllChange"
          class="groupstyle"
          v-if="classificationsshow == 2"
        >
          <el-checkbox
            v-for="item in flightsafety"
            :label="item.value"
            :key="item.label"
            size="large"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <!-- 三级预警 -->
        <div
          class="waringShowViewClass-item"
          :class="{ active: classificationsshow == 3 }"
          @click="handlerclassification(3)"
        >
          三级预警
          <span class="item-img"
            ><img
              :src="VITE_BASE_PUBLICPATH + '/img/cockpit/topdown.png'"
              alt=""
              v-if="classificationsshow == 3" />
            <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/lowdown.png'" alt="" v-else
          /></span>
        </div>
        <el-checkbox-group
          v-model="checkWaring"
          :disabled="clickWaringDis"
          @change="handleCheckAllChange"
          class="groupstyle"
          v-if="classificationsshow == 3"
        >
          <el-checkbox
            v-for="item in communicationlist"
            :label="item.value"
            :key="item.label"
            size="large"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <div
          class="waringShowViewClass-item"
          :class="{ active: classificationsshow == 6 }"
          @click="handlerclassification(6)"
        >
          多发预警
          <span class="item-img"
            ><img
              :src="VITE_BASE_PUBLICPATH + '/img/cockpit/topdown.png'"
              alt=""
              v-if="classificationsshow == 6" />
            <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/lowdown.png'" alt="" v-else
          /></span>
        </div>
        <el-checkbox-group
          v-model="checkWaring"
          :disabled="clickWaringDis"
          @change="handleCheckAllChange"
          class="groupstyle"
          v-if="classificationsshow == 6"
        >
          <el-checkbox
            v-for="item in notOnlyOnelist"
            :label="item.value"
            :key="item.label"
            size="large"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <alarm-tabs-waring
        ref="alarmTabsWarin"
        :alarmNameNum="alarmNameNum"
        @isTabsShow="isTabsShowFun"
        :visible="alarmWaringVisible"
        :single="true"
      />
      <tabs-waring
        :visible="tabsWaringVisible"
        :single="true"
        @showWaringTabs2="showWaringTabs2"
      />
      <div class="helpCard" v-if="isHelpCard">
        <div class="helpCard-content">
          <div class="UAV1"></div>
          <div>审核通过的无人机</div>
        </div>
        <div class="helpCard-content">
          <div class="UAV2"></div>
          <div>行业无人机</div>
        </div>
        <div class="helpCard-content">
          <div class="UAV3"></div>
          <div>适飞区无人机</div>
        </div>
        <div class="helpCard-content">
          <div class="UAV4"></div>
          <div>黑飞无人机</div>
        </div>
      </div>
      <div class="Warninginformation" id="myDiv" v-if="showWarninginformation">
        <img :src="imgurl" alt="" />
      </div>
      <div class="Judgment" id="myJud" v-if="showJudgment">
        <div class="title">预警判断依据</div>
        <div style="margin-top: 25px">
          <span class="text">{{ Judtext }}</span>
        </div>
      </div>
      <RouteInformation
        title="航线信息"
        ref="routeRef"
        @routeVisibleClose="routeVisibleClose"
        @drawLine="addCurUAVLine"
        @removeLine="removeCurUAVLine"
        :visible="routeInforVisible"
        :single="true"
        v-drag
      ></RouteInformation>
      <!-- 气象设备 -->
      <div class="devicedialog" v-if="showdevivedialog">
        <div class="top">
          <div class="text">设备信息</div>
          <div class="close" @click="showdevivedialog = false">
            <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/closeBtn.png'" alt="" />
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-item">
            <div class="item-title">布防点位:</div>
            <div class="item-title">微型气象站</div>
          </div>
          <div class="bottom-item">
            <div class="item-title">设备名称:</div>
            <div class="item-title">JN-01</div>
          </div>
          <div class="bottom-item">
            <div class="item-title">设备类型:</div>
            <div class="item-title">侦测设备</div>
          </div>
          <div class="bottom-item">
            <div class="item-title">设备位置:</div>
            <div class="item-title">120.192118, 30.317453</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  provide,
  reactive,
  ref,
  nextTick,
  getCurrentInstance,
  onUnmounted,
  onBeforeMount,
  onBeforeUnmount,
  computed,
} from "vue";
import { ElMessage, ElNotification } from "element-plus";
import Footer2 from "@/views/airMonitor/components/footer2.vue";
import Header from "@/views/airMonitor/components/header.vue";
import Card from "@/views/airMonitor/components/card.vue";
import Tabs from "@/views/airMonitor/components/tabs.vue";
import VideoStreaming from "@/views/airMonitor/components/videoStreaming.vue";
import ManagerTabs from "@/views/airMonitor/components/managerTabs.vue";
import WarningTabs from "@/views/airMonitor/components/warningTabs.vue";
import AlarmTabs from "@/views/airMonitor/components/alarmTabs.vue";
import NumberCenter from "@/views/airMonitor/components/numberCenter.vue";
import ToolTab from "@/views/airMonitor/components/toolTab.vue";
import HeightSearch from "@/views/airMonitor/components/HeightSearch.vue";
import TodayWaring from "@/views/airMonitor/components/TodayWaring.vue";
import TodaySorties from "@/views/airMonitor/components/TodaySorties.vue";
import RouteInformation from "@/views/airMonitor/components/routeInformation.vue";
import * as CesiumAll from "cesium";
import Cesium from "@/utils/cesium";
import Windy from "@/utils/windyClass";
import useCockpitStore from "@/store/modules/cockpit";
import useFlightTaskStore from "@/store/modules/flightTask";
import useMqttStore from "@/store/modules/mqttInfo";
import axios from "axios";
import { WindyData } from "@/utils/mockWindy.js";
import { getToken } from "@/utils/auth";
import { blobValidate } from "@/utils/ruoyi";
import Controller from "@/utils/geoMap";
import Threesence from "@/utils/threesence";
import { getDetailInfo } from "@/api/airSpace/airSpaceSetUp";
import { getDeviceDetail, getDeviceWeather } from "@/api/cockpit/device";
import { getAirApplyListApi } from "@/api/flightTask/airspaceApply";
import { getAirportWeather } from "@/api/cockpit/weather";
import MeasureTools from "@/utils/measureTool";
import { getAirTypeIds } from "@/api/airSpace/enquiry";
import mqtt from "mqtt/dist/mqtt";
import { useRoute, useRouter } from "vue-router";
import { getTemperature } from "@/api/cockpit/meteorological";
import { gcj02towgs84 } from "@/utils/coordinateTrans";
import { PAGInit } from "libpag";
import AlarmTabsWaring from "@/views/airMonitor/components/alarmTabsWaring.vue";
import TabsWaring from "@/views/airMonitor/components/tabsWaring.vue";
import useFootBtnsStore from "@/store/modules/footBtns";
import { airlineFormat } from "@/utils/airlineFromat";
import { getCurAirplane } from "@/api/cockpit/curAirplane";
import { dataFormat } from "@/utils/format";

const VITE_BASE_PUBLICPATH = import.meta.env.VITE_BASE_PUBLICPATH;
const routeRef = ref(null);
const route = useRoute();
const router = useRouter();
const whoFirst = ref(true);
const skipShow = ref(false);
const immediatelyShow = ref(false);
const whoFirst2 = ref(false);
const mqttStore = useMqttStore();
let { that, proxy } = getCurrentInstance();
const cockpitStore = useCockpitStore();
const flyTaskStore = useFlightTaskStore();
const dialogVisible = ref(false);
const tabs = ref();
const waringTabsRef = ref();
const flyingTabsRef = ref();
const videoStreamRef = ref();
const compassShow = ref(false);
const managerTabsVisible = ref(false);
const waringVisible = ref(false);
const routeInforVisible = ref(false);
const videoStreamVisible = ref(false);
const title = ref("");
const childComponentRef = ref(null);
// card组件的标题
const typeCard = ref("");
// 传递给card组件的内容
let content = ref({});
// 浏览器宽度小于1550
const isSmall = ref(false);
// 浏览器是否全屏
const isFull = ref(false);
// 底部菜单是否显示
const footerIsShow = ref(false);
// 是否查看详情
const isShowDetail = ref(false);
// 是否显示预警演示
const isShowDemo = ref(false);
const isHelpCard = ref(false);
const isWarning = computed(() => {
  return mqttStore.alarmList.length > 0;
});

const fullTitle = ref("全屏显示");

// ------------------------------------------------------   预警演示    -------------------------------------------------//
// 预警演示弹窗是否显示
const isWaringShow = ref(false);
const alarmNameNum = ref("");
const alarmTabsWarin = ref();
const alarmWaringVisible = ref(false);
const tabsWaringVisible = ref(false);
const checkWaring = ref([]);
const clickWaringDis = ref(false);
//预警信息弹窗
let imgurl = ref(""); //预警弹窗图片
let showWarninginformation = ref(false);
let Judtext = ref(""); //预警文字
let showJudgment = ref(false);
let managelist = [
  {
    label: "民航冲突预警",
    value: "MINHANG",
  },
  {
    label: "侵入管制空域预警",
    value: "QINRU",
  },
  {
    label: "行业级-消费级航线冲突",
    value: "Conflict",
  },
  {
    label: "行业级-行业级航线冲突",
    value: "Conflict2",
  },
  {
    label: "热气球预警演示",
    value: "REQIQIU",
  },
  {
    label: "直升机预警演示",
    value: "ZHISHENGJI",
  },
  // {
  //   label: "飞艇预警演示",
  //   value: "FEITING",
  // },
  // {
  //   label: "航模预警演示",
  //   value: "HANGMO",
  // },
];
//飞行安全预警
let flightsafety = [
  {
    label: "偏离航线预警",
    value: "Invasion",
  },
  {
    label: "偏离空域预警",
    value: "Pianli",
  },
  {
    label: "无线电干扰预警",
    value: "CounterWarning",
  },
  {
    label: "电磁紊乱预警",
    value: "Interfere",
  },
  {
    label: "风力风速异常预警",
    value: "WindSpeed",
  },
  {
    label: "降雨异常预警",
    value: "QIXIANG",
  },
];
//通信导航预警
let communicationlist = [
  {
    label: "限高预警",
    value: "HeightLimit",
  },
  {
    label: "途径热门飞行区域预警",
    value: "PopularAreas",
  },
  {
    label: "途径事故多发区域预警",
    value: "CrashPoint",
  },
];

//多发
let notOnlyOnelist = [
  {
    label: "多发预警演示",
    value: "DUOFA",
  },
];
/**
 * @无人机侵入演示   》》》》》》》》》》eg
 */
let Interval1;
let setTimeout1;
let setTimeout2;
let setTimeout3;
let Intervalminhang;
let imgIcon = null;
let importantFirm = null;
let flyPeopleIcon = null;
let flyPeopleIcon1 = null;
let flyPeopleLine = null;
let flyPeopleLine1 = null;
// 图片数组
let imgIconList = [];
let trackList = [];
let trackList2 = [];
// 定时器数组
let timeoutList = [];
let intervalList = [];
// let markerPoint = null;
let minhangimgicon = null;
let minhangimgiconTitle = null;
let markerGeoPoint = [];
let footBtnsStore = useFootBtnsStore();
let Invasionline1;
let cylinder;
let circular1;
let conflictcCircular1;
let conflictcCircular2;
let InvasionInterval2;
let invasionInterval;
let message = null;
let ConflictInterval2 = null;

//电磁干扰预警
let Interferesettimeout = null;

//限高
let HeightLimitGeometry;
let HeightLimitInterval = null;
let HeightLimitsetTimeout = null;
let HeightLimittext = null;
//途径热门区域
// let PopularAreastext = null;
let PopularAreasInterval = null;
let PopularAreassetTimeout = null;
//途径坠机多发区域
let CrashPointtext = null;
let CrashPointTimeout = null;
let CrashPointInterval = null;
//风速预警//
let showdevivedialog = ref(false);
let windicon = null;
let particles;
let WindSpeedsetTimeout = null;
//反制设备预警
let CounterWarningInterval = null;
let directionalMarker = null; //演示反制设备图标
let CounterWarningsetTimeout = null;

let classificationsshow = ref(0); //预警分类下拉箭头
// 民航
let pontDataMH = null;
let pontDataMH1 = null;
let pontDataMH2 = null;
let pontDataMH3 = null;
let pontDataMH4 = null;
let pontDataMH5 = null;
let pontDataMH6 = null;

/**
 * @description: 处理预警分类
 * @params type 那种类型
 */
const handlerclassification = (type) => {
  if (classificationsshow.value != type) {
    classificationsshow.value = type;
  } else {
    classificationsshow.value = 0;
  }
};
let firstIcon = null;
let firstTitle = null;
let secondIcon = null;
let secondTitle = null;
let thirdIcon = null;
let thirdTitle = null;
let curDateTime = null;
let updataInterval = null;
let duofaTimeOut = null;
/**
 * @触发多发预警事件
 * */
const duofa = () => {
  curDateTime = 0;
  addDuofaIcon();
};

/**
 * @添加多处预警事件图标
 * */
const addDuofaIcon = () => {
  clearall();
  isShowDetail.value = true;
  aMap.setPitch(65);
  aMap.setZoomAndCenter(13.3, [120.174091, 30.228194], false);
  curDateTime = curDateTime + 1;
  let name1 = `侵入预警,${curDateTime}分钟前`;
  let name2 = `无线电干扰预警,${curDateTime + 1}分钟前`;
  let name3 = `限高预警,${curDateTime + 1}分钟前`;
  firstIcon = GController.drawDuofaMarker(
    [120.215275, 30.211655],
    "firstLevel.png",
    { alarmType: ["QINRU"], alarmLevel: "firstLevel", name: name1 }
  );
  secondIcon = GController.drawDuofaMarker(
    [120.101225, 30.262237],
    "secondLevel.png",
    { alarmType: ["CounterWarning"], alarmLevel: "secondLevel", name: name2 }
  );
  thirdIcon = GController.drawDuofaMarker(
    [120.182276, 30.290202],
    "thirdLevel.png",
    { alarmType: ["HeightLimit"], alarmLevel: "thirdLevel", name: name3 }
  );
  // 重点单位图标
  GController.drawLabelMarker(
    [120.133694, 30.265878],
    "importantFirm.png",
    "黄龙体育中心"
  );
  GController.drawLabelMarker(
    [120.12615, 30.249057],
    "importantFirm.png",
    "浙江医院(林隐区院)"
  );
  GController.drawLabelMarker(
    [120.195676, 30.271937],
    "importantFirm.png",
    "浙江大学"
  );
  GController.drawLabelMarker(
    [120.069155, 30.268637],
    "importantFirm.png",
    "西溪湿地"
  );
  GController.drawLabelMarker(
    [120.071225, 30.282037],
    "importantFirm.png",
    "西湖文体中心"
  );
  GController.drawLabelMarker(
    [120.228829, 30.229097],
    "importantFirm.png",
    "杭州奥体中心"
  );
  GController.drawLabelMarker(
    [120.212904, 30.291363],
    "importantFirm.png",
    "杭州东站"
  );

  updataInterval = setInterval(() => {
    curDateTime = curDateTime + 1;
    let name1 = `侵入预警,${curDateTime}分钟前`;
    let name2 = `无线电干扰预警,${curDateTime + 1}分钟前`;
    let name3 = `限高预警,${curDateTime + 1}分钟前`;
    firstIcon = GController.drawDuofaMarker(
      [120.215275, 30.211655],
      "firstLevel.png",
      { alarmType: ["QINRU"], alarmLevel: "firstLevel", name: name1 }
    );
    secondIcon = GController.drawDuofaMarker(
      [120.101225, 30.262237],
      "secondLevel.png",
      { alarmType: ["CounterWarning"], alarmLevel: "secondLevel", name: name2 }
    );
    thirdIcon = GController.drawDuofaMarker(
      [120.182276, 30.290202],
      "thirdLevel.png",
      { alarmType: ["HeightLimit"], alarmLevel: "thirdLevel", name: name3 }
    );
  }, 60000);
};

/**
 * @打开预警演示时的空域弹窗
 * */
const openDemoPop = (type) => {
  if (type === "airspace") {
    title.value = "空域信息";
    content.value = {
      airspaceName: "奥体禁飞区",
      lowHeight: 100,
      topHeight: 400,
      dateRange: "永久有效",
    };
  }
  if (type === "noperson") {
    title.value = "无人机信息";
  }
  typeCard.value = type;
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 320 + "px";
    box.style.top = 180 + "px";
  }, 200);
};

/**
 * @description:  闪红屏
 */
function flicker() {
  if (document.getElementById("light")) {
    document
      .getElementById("app")
      .removeChild(document.getElementById("light"));
  }
  const div = document.createElement("div");
  div.id = "light";
  document.getElementById("app").appendChild(div);
  setTimeout(() => {
    if (document.getElementById("light")) {
      document
        .getElementById("app")
        .removeChild(document.getElementById("light"));
    }
  }, 8000);
}

function handleCheckAllChange(val) {
  //当点下一个时直接跳转
  if (val.length > 1) {
    checkWaring.value.shift();
    clearall();
  }
  let airspace = [...footBtnsStore.defaultAirspace];
  if (val.length === 0) {
    clearall();
    return;
  }
  // GTitleset.clearRemovedrawlLine()
  // 关闭普通弹窗
  visibleClose();
  // 关闭飞行器弹窗
  if (flyTaskStore.TabsVisible) tabs.value.tabsVisibleClose();

  // 断开mqtt链接
  // stopConnect();
  // 显示预警演示
  isShowDemo.value = true;
  // 关闭告警弹窗
  mqttStore.clearMqttWaring();
  // if (val.length) {
  //   flicker();
  // }
  switch (val[0]) {
    case "QINRU":
      isShowDetail.value = true;
      showJudgment.value = true;
      Judtext.value =
        "根据《无人驾驶航空器飞行管理暂行条例》规定，“未经空中交通管理机构批准，不得在管制空域内实施无人驾驶航空器飞行活动。”。系统通过侦测设备识别到无人机或其他航空器未经授权（未匹配到飞行计划）进入管制空域时，触发预警。";

      imgIcon = GTitleset.flyicon(
        [120.215275, 30.211655, 300],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.215275, 30.211655, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );

      //绘制曲线
      let line1 = GTitleset.curvetrajectory([
        [120.215275, 30.211655, 0],
        [120.220404, 30.212972, 300],
        [120.222442, 30.21338, 300],
      ]);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          message = ElMessage.warning({
            message: "发现XXX管制空域有无人机侵入，已通知相关人员立即返航。",
            duration: 8000,
          });
          showWarninginformation.value = true;
          imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/intrusion.png";
          dialogVisible.value = false;
          // 打开被侵入空域信息
          openDemoPop("airspace");
          let timer = setTimeout(() => {
            // 使用JavaScript添加类名来触发过渡效果
            const myDiv = document.getElementById("myDiv");
            myDiv.classList.add("show");
          }, 1000);
          timeoutList.push(timer);
          // 屏闪
          flicker();
          drawLine2();
          // 清除定时器1
          if (Interval1) {
            clearInterval(Interval1);
          }
          //清除图标
          GTitleset.remove(imgIcon);
        }
      }, 200);
      let boundary = [
        [120.220926, 30.247091],
        [120.236953, 30.23763],
        [120.242495, 30.234704],
        [120.248654, 30.231565],
        [120.250449, 30.230317],
        [120.251687, 30.229113],
        [120.252766, 30.227861],
        [120.253502, 30.226414],
        [120.25405, 30.224902],
        [120.254334, 30.222134],
        [120.254306, 30.219906],
        [120.25272, 30.219505],
        [120.248332, 30.218384],
        [120.243929, 30.217638],
        [120.239695, 30.217261],
        [120.235528, 30.217169],
        [120.234382, 30.217194],
        [120.233235, 30.217054],
        [120.23258, 30.21699],
        [120.231918, 30.216865],
        [120.230697, 30.216518],
        [120.224136, 30.213124],
        [120.221919, 30.215949],
        [120.219763, 30.218437],
        [120.217511, 30.220199],
        [120.21575, 30.221498],
        [120.205388, 30.229217],
        [120.211158, 30.23404],
        [120.213218, 30.236791],
        [120.214701, 30.238311],
        [120.21635, 30.240607],
        [120.217666, 30.242515],
        [120.218806, 30.244134],
        [120.220926, 30.247091],
      ];
      cylinder = GTitleset.polygonGeometry(boundary, 0, "#ce2c29", {
        airTypeId: 1258365545,
      });
      aMap.setZoomAndCenter(14, [120.228315, 30.228948], false);
      break;
    case "Invasion":
      showJudgment.value = true;
      Judtext.value =
        "系统以航线为基准形成一个半径为25m的管道,无人机在管道中飞行时,系统会实时监控无人机的位置，并将其与预设的管道进行比较。如果检测到无人机偏离了管道，触发预警,通知无人机偏离航线,请立即返航。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.109814, 30.260645, 1000],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.105814, 30.260645, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      flyPeopleLine = GTitleset.dashedline([
        [120.105814, 30.260645, 0],
        [120.109814, 30.260645, 1000],
      ]);
      trackList = [
        [120.109814, 30.260645, 1000],
        [120.138806, 30.270621, 1000],
      ];
      GController.drawLabelMarker(
        [120.168055, 30.285659],
        "importantFirm.png",
        "浙江省人民医院"
      );
      //绘制曲线
      Invasionline1 = GTitleset.exampleTrack(trackList);
      invasionInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          showWarninginformation.value = true;
          imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/Invasion.png";
          let timer = setTimeout(() => {
            alarmNameNum.value = "偏离申请航线，请及时关注!";
            waringAction();
            // 显示无人机信息弹窗
            openDemoPop("noperson");
            // 屏闪
            flicker();
            message = ElMessage.warning({
              message:
                "发现无人驾驶航空器偏离预设航线，已通知相关人员立即返航！",
              duration: 25000,
            });
            // 使用JavaScript添加类名来触发过渡效果
            const myDiv = document.getElementById("myDiv");
            myDiv.classList.add("show");
          }, 1000);
          timeoutList.push(timer);
          InvasiondrawLine2();
          // 清除定时器
          if (invasionInterval) {
            clearInterval(invasionInterval);
          }
          //清除图标
          GTitleset.remove(imgIcon);
        }
      }, 200);
      circular1 = GTitleset.circular1(
        [
          [120.109814, 30.260645, 1000],
          [120.138806, 30.270621, 1000],
          [120.182174, 30.280345, 1000],
          [120.19939, 30.282722, 1000],
        ],
        "#23f155"
      );
      aMap.setZoomAndCenter(13, [120.155121, 30.278066], false);
      break;
    case "Interfere":
      // 屏闪
      flicker();
      showJudgment.value = true;
      Judtext.value =
        "侦测设备侦测到电磁信号紊乱时,对其1000m范围内的无人机进行通,提醒前方存在电磁紊乱,告知具体频段注意避让。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      // clickWaringFunTrue();
      trackList = [
        [120.18193245, 30.29375707, 0],
        [120.18588066, 30.29372002, 80],
        [120.18782887, 30.29360885, 100],
        [120.18947668, 30.29349769, 120],
        [120.192491, 30.293663, 100],
        [120.193409, 30.294663, 100],
        [120.1962302, 30.298997, 80],
        [120.198847, 30.302812, 50],
        [120.203537, 30.304059, 50],
        [120.208404, 30.305628, 40],
        [120.220221, 30.305209, 40],
        [120.221978, 30.305155, 40],
        [120.223978, 30.305055, 40],
      ];
      //绘制曲线
      let Interfereline = GTitleset.exampleTrack(
        trackList,
        [120.20974159, 30.2952383, 100]
      );
      let deviceIcon = GController.drawLabelMarker(
        [120.20874159, 30.2972383],
        "FrameModel.png",
        "null",
        [60, 70]
      );
      // imgIconList.push(deviceIcon);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      Interferesettimeout = setTimeout(() => {
        message = ElMessage.warning({
          message: "前方有电磁干扰，已通知飞手避让！",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/electromagnetic.png";
        setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 1000);
      }, 3000);
      aMap.setZoomAndCenter(14.7, [120.20974159, 30.2952383], false);
      break;
    case "MINHANG":
      showJudgment.value = true;
      Judtext.value =
        "根据无人机与民航客机的相对距离、航向以及飞行高度等信息评估风险，当侦测到民航飞机进近，下降到500m-3000m高度时,对其范围内五公里的无人机进行短信通知,要求无人机注意避让驶离。";
      isShowDetail.value = true;
      airspace.forEach((item) => {
        hideAirspace(item);
        addAirspace(item);
      });
      pontDataMH = GTitleset.flyicon(
        [120.387359, 30.202202, 1000],
        "UAVBlackFly.png"
      );
      let timer = setTimeout(() => {
        message = ElMessage.warning({
          message:
            "发现民航飞机（CA5527）当前位置附近存在无人机驾驶航空器，已通知相关人员及时避让。",
          duration: 10000,
        });
      }, 10000);
      timeoutList.push(timer);
      let timer1 = setTimeout(() => {
        GTitleset.remove(pontDataMH);
        pontDataMH1 = GTitleset.flyicon(
          [120.384065, 30.194196, 1000],
          "UAVBlackFly.png"
        );
        let timer1 = setTimeout(() => {
          GTitleset.remove(pontDataMH1);
          pontDataMH2 = GTitleset.flyicon(
            [120.381051, 30.190085, 1000],
            "UAVBlackFly.png"
          );
        }, 1000);
        let timer2 = setTimeout(() => {
          GTitleset.remove(pontDataMH2);
          pontDataMH3 = GTitleset.flyicon(
            [120.377756, 30.185356, 1000],
            "UAVBlackFly.png"
          );
        }, 2000);
        let timer3 = setTimeout(() => {
          GTitleset.remove(pontDataMH3);
          pontDataMH4 = GTitleset.flyicon(
            [120.375519, 30.180412, 1000],
            "UAVBlackFly.png"
          );
        }, 3000);
        let timer4 = setTimeout(() => {
          GTitleset.remove(pontDataMH4);
          pontDataMH5 = GTitleset.flyicon(
            [120.372349, 30.174501, 1000],
            "UAVBlackFly.png"
          );
        }, 4000);
        let timer5 = setTimeout(() => {
          GTitleset.remove(pontDataMH5);
          pontDataMH6 = GTitleset.flyicon(
            [120.370205, 30.168669, 1000],
            "UAVBlackFly.png"
          );
        }, 5000);
        timeoutList.push(timer1);
        timeoutList.push(timer2);
        timeoutList.push(timer3);
        timeoutList.push(timer4);
        timeoutList.push(timer5);
      }, 15000);
      timeoutList.push(timer1);
      minhangimgicon = GTitleset.iconSprite(
        [120.21029877, 30.17518614, 1200],
        "minghang1.png",
        { type: 7, directionAngle: 90 },
        "ICON",
        0.03,
        0.03
      );
      minhangimgiconTitle = GTitleset.createTag(
        [120.21029877, 30.17518614, 1200],
        `HBH3293`
      );
      // imgIconList.push(minhangimgiconTitle);
      //绘制曲线
      let minhangline1 = GTitleset.curvetrajectory([
        [120.21029877, 30.17518614, 1200],
        [120.22029877, 30.17718614, 1000],
        [120.24742126, 30.17985725, 887],
        [120.27076721, 30.18312184, 710],
        [120.29582977, 30.18668309, 600],
      ]);
      //绘制曲线
      let minhangline2 = GTitleset.curvetrajectory2([
        [120.21029877, 30.17518614, 1200],
        [120.22029877, 30.17718614, 1000],
        [120.24742126, 30.17985725, 887],
        [120.27076721, 30.18312184, 710],
        [120.29582977, 30.18668309, 600],
      ]);

      Intervalminhang = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(
          minhangimgicon,
          "#ff0000",
          true,
          false,
          "MINHANG"
        );
        let stopInterval2 = GTitleset.moveOnCurve2(
          minhangimgiconTitle,
          "#ff0000",
          true,
          false,
          "MINHANG"
        );
        if (stopInterval == "stop" && stopInterval2 == "stop") {
          // if (stopInterval == "stop") {
          if (markerGeoPoint.length > 0) {
            markerGeoPoint.forEach((id) => {
              aMap.remove(id);
            });
          }
          GTitleset.remove(minhangimgiconTitle);
          // 屏闪
          flicker();
          InvasiondrawLined();
          // 清除定时器
          if (Intervalminhang) {
            clearInterval(Intervalminhang);
          }
          //清除图标
          GTitleset.remove(minhangimgicon);
        }
      }, 200);
      // GTitleset.circular1();
      aMap.setZoomAndCenter(12, [120.38028717, 30.20715777, 600], false);
      break;
    case "Conflict":
      var imgIcon2 = null;
      var imgIcon4 = null;
      showJudgment.value = true;
      Judtext.value =
        "行业级无人机以自己为中心有一个半径为40m的警戒圈(目前大部分无人机的飞行秒速均值为20m/s),消费级无人机如果进入了行业无人机的警戒圈,通知两架无人机悬停,通知行业级无人机等待,待消费级无人机飞出警戒圈后,行业级无人机继续飞行。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon([120.132359, 30.294779, 1000], "UAV2.png");
      flyPeopleIcon = GTitleset.flyicon(
        [120.129359, 30.294779, 0],
        "flyHandHY.png",
        [0.025, 0.03]
      );
      flyPeopleLine = GTitleset.dashedline([
        [120.129359, 30.294779, 0],
        [120.132359, 30.294779, 1000],
      ]);
      flyPeopleIcon1 = GTitleset.flyicon(
        [120.190078, 30.265976, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      flyPeopleLine1 = GTitleset.dashedline([
        [120.190078, 30.265976, 0],
        [120.190078, 30.268976, 1000],
      ]);
      //绘制曲线
      var Conflictline1 = GTitleset.curvetrajectory([
        [120.132359, 30.294779, 1000],
        [120.135628, 30.294906, 1000],
        [120.154727, 30.297059, 1000],
      ]);
      GTitleset.diffusionwave(1.5, 0xffff00, [120.132359, 30.294779]);

      Interval1 = setInterval(() => {
        var stopInterval = GTitleset.moveOnCurve(
          imgIcon,
          "#ff0000",
          true,
          false,
          "Conflict"
        );
        if (stopInterval == "stop") {
          GTitleset.removeLineList2();
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
          //清除图标
          GTitleset.remove(imgIcon);
          message = ElMessage.warning({
            message: "发现航线冲突，已通知飞手避让！",
            duration: 8000,
          });
          showWarninginformation.value = true;
          imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/conflict1.png";
          setTimeout(() => {
            // 使用JavaScript添加类名来触发过渡效果
            const myDiv = document.getElementById("myDiv");
            myDiv.classList.add("show");
          }, 200);
          imgIcon4 = GTitleset.flyicon(
            [120.154727, 30.297059, 1000],
            "UAV2.png"
          );
          imgIconList.push(imgIcon4);
          // 屏闪
          flicker();
          //绘制曲线
          var line2 = GTitleset.curvetrajectory([
            [120.176578, 30.287832, 1000],
            [120.171772, 30.297778, 1000],
            [120.169653, 30.305645, 1000],
            [120.167308, 30.32954, 1000],
          ]);
          ConflictInterval2 = setInterval(() => {
            var stopInterval = GTitleset.moveOnCurve(
              imgIcon2,
              "#ff0000",
              false,
              false,
              "Conflict"
            ); // 第二条轨道无人机移动
            // let stopIntervalText = GTitleset.moveOnCurveText(imgicon, "#ffffff");
            if (stopInterval == "stop") {
              GTitleset.removeLineList2();
              //清除图标
              GTitleset.remove(imgIcon2);
              // 清除定时器1
              if (ConflictInterval2) {
                clearInterval(ConflictInterval2);
              }
              var line3 = GTitleset.curvetrajectory([
                [120.15209, 30.296735, 1000],
                [120.178861, 30.298447, 1000],
                [120.209551, 30.308367, 1000],
              ]);
              let diffData = GTitleset.diffusionwave(
                1.5,
                0xffff00,
                [120.154727, 30.297059]
              );
              showWarninginformation.value = true;
              imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/conflict2.png";
              // 第一架次（第二次飞行）
              var ConflictInterval4 = setInterval(() => {
                var stopInterval4 = GTitleset.moveOnCurve(
                  imgIcon4,
                  "#ff0000",
                  true,
                  false,
                  "Conflict"
                );
                if (stopInterval4 == "stop") {
                  GTitleset.remove(imgIcon4);
                  // 清除定时器1
                  if (ConflictInterval4) {
                    clearInterval(ConflictInterval4);
                  }
                }
                setTimeout(() => {
                  GTitleset.remove(diffData);
                }, 10000);
              }, 200);
              intervalList.push(ConflictInterval4);
            }
          }, 200);
          intervalList.push(ConflictInterval2);
        }
      }, 200);
      intervalList.push(Interval1);
      // 管道1
      conflictcCircular1 = GTitleset.circular1(
        [
          [120.133604, 30.294554, 1000],
          [120.148403, 30.296376, 1000],
          [120.181068, 30.298843, 1000],
          [120.207974, 30.307555, 1000],
        ],
        "#23f155"
      );
      setTimeout2 = setTimeout(() => {
        setTimeout1 = setTimeout(() => {
          // clickWaringFunTrue();
          showWarninginformation.value = true;
          imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/conflict1.png";
          setTimeout(() => {
            // 使用JavaScript添加类名来触发过渡效果
            const myDiv = document.getElementById("myDiv");
            myDiv.classList.add("show");
          }, 200);
        }, 200);
      }, 10000);
      // setTimeout3 = setTimeout(() => {
      // 管道2
      conflictcCircular2 = GTitleset.circular1(
        [
          [120.190013, 30.268982, 1000],
          [120.172165, 30.296592, 1000],
          [120.167348, 30.32919, 1000],
        ],
        "#ab0709"
      );
      imgIcon2 = GTitleset.flyicon([120.190078, 30.268976, 1000], "UAV1.png");
      imgIconList.push(imgIcon2);
      var timeout1 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.187985, 30.271713, 1000], "UAV1.png");
        imgIconList.push(imgIcon2);
      }, 1500);
      var timeout2 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.186042, 30.274341, 1000], "UAV1.png");
        imgIconList.push(imgIcon2);
      }, 3000);
      var timeout3 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.183382, 30.277156, 1000], "UAV1.png");
        imgIconList.push(imgIcon2);
      }, 4500);
      var timeout4 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.181705, 30.279924, 1000], "UAV1.png");
        imgIconList.push(imgIcon2);
      }, 6000);
      var timeout5 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.179449, 30.28289, 1000], "UAV1.png");
        imgIconList.push(imgIcon2);
      }, 7500);
      var timeout6 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.177042, 30.285965, 1000], "UAV1.png");
        imgIconList.push(imgIcon2);
      }, 9000);
      timeoutList.push(timeout1);
      timeoutList.push(timeout2);
      timeoutList.push(timeout3);
      timeoutList.push(timeout4);
      timeoutList.push(timeout5);
      timeoutList.push(timeout6);
      // timeoutList.push(timeout7);
      aMap.setZoomAndCenter(13, [120.170186, 30.295755, 600], false);
      break;
    case "Conflict2":
      var imgIcon2 = null;
      var imgIcon4 = null;
      showJudgment.value = true;
      Judtext.value =
        "两架无人机均有警戒圈,双方警戒圈触碰时,根据无人机所执行的任务性质分别发送悬停和继续飞行的通知(医疗救援>科学探测>物流>娱乐),优先级高的继续飞行,低的悬停。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon([120.132359, 30.294779, 1000], "UAV2.png");
      flyPeopleIcon = GTitleset.flyicon(
        [120.129359, 30.294779, 0],
        "flyHandHY.png",
        [0.025, 0.03]
      );
      flyPeopleLine = GTitleset.dashedline([
        [120.129359, 30.294779, 0],
        [120.132359, 30.294779, 1000],
      ]);
      flyPeopleIcon1 = GTitleset.flyicon(
        [120.190078, 30.265976, 0],
        "flyHandHY.png",
        [0.025, 0.03]
      );
      flyPeopleLine1 = GTitleset.dashedline([
        [120.190078, 30.265976, 0],
        [120.190078, 30.268976, 1000],
      ]);
      //绘制曲线
      var Conflictline1 = GTitleset.curvetrajectory([
        [120.132359, 30.294779, 1000],
        [120.135628, 30.294906, 1000],
        [120.154727, 30.297059, 1000],
      ]);
      let diffData = GTitleset.diffusionwave(
        1.5,
        0xffff00,
        [120.132359, 30.294779]
      );
      GTitleset.diffusionwave2(1.5, 0xffff00, [120.190013, 30.268982]);

      Interval1 = setInterval(() => {
        var stopInterval = GTitleset.moveOnCurve(
          imgIcon,
          "#ff0000",
          true,
          false,
          "Conflict2"
        );
        if (stopInterval == "stop") {
          GTitleset.removeLineList2();
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
          //清除图标
          GTitleset.remove(imgIcon);
          imgIcon4 = GTitleset.flyicon(
            [120.154727, 30.297059, 1000],
            "UAV2.png"
          );
          imgIconList.push(imgIcon4);
          // 屏闪
          flicker();
          //绘制曲线
          var line2 = GTitleset.curvetrajectory([
            [120.176578, 30.287832, 1000],
            [120.171772, 30.297778, 1000],
            [120.169653, 30.305645, 1000],
            [120.167308, 30.32954, 1000],
          ]);
          ConflictInterval2 = setInterval(() => {
            // 第二条轨道无人机移动
            var stopInterval = GTitleset.moveOnCurve(
              imgIcon2,
              "#ff0000",
              false,
              true,
              "Conflict2"
            );
            // let stopIntervalText = GTitleset.moveOnCurveText(imgicon, "#ffffff");
            if (stopInterval == "stop") {
              GTitleset.removeLineList2();
              //清除图标
              GTitleset.remove(imgIcon2);
              // 清除定时器1
              if (ConflictInterval2) {
                clearInterval(ConflictInterval2);
              }
              var line3 = GTitleset.curvetrajectory([
                [120.15209, 30.296735, 1000],
                [120.178861, 30.298447, 1000],
                [120.209551, 30.308367, 1000],
              ]);

              showWarninginformation.value = true;
              imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/conflict2.png";
              // 第一架次（第二次飞行）
              var ConflictInterval4 = setInterval(() => {
                var stopInterval4 = GTitleset.moveOnCurve(
                  imgIcon4,
                  "#ff0000",
                  true,
                  false,
                  "Conflict2"
                );
                // let stopIntervalText = GTitleset.moveOnCurveText(imgicon, "#ffffff");
                if (stopInterval4 == "stop") {
                  GTitleset.remove(imgIcon4);
                  // 清除定时器1
                  if (ConflictInterval4) {
                    clearInterval(ConflictInterval4);
                  }
                }
                setTimeout(() => {
                  GTitleset.remove(diffData);
                }, 10000);
              }, 200);
              intervalList.push(ConflictInterval4);
            }
          }, 200);
          intervalList.push(ConflictInterval2);
        }
      }, 200);
      intervalList.push(Interval1);
      // 管道1
      conflictcCircular1 = GTitleset.circular1(
        [
          [120.133604, 30.294554, 1000],
          [120.148403, 30.296376, 1000],
          [120.181068, 30.298843, 1000],
          [120.207974, 30.307555, 1000],
        ],
        "#23f155"
      );
      setTimeout2 = setTimeout(() => {
        setTimeout1 = setTimeout(() => {
          // clickWaringFunTrue();
          showWarninginformation.value = true;
          imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/conflict1.png";
          setTimeout(() => {
            // 使用JavaScript添加类名来触发过渡效果
            const myDiv = document.getElementById("myDiv");
            myDiv.classList.add("show");
          }, 200);
        }, 200);
      }, 10000);
      // setTimeout3 = setTimeout(() => {
      // 管道2
      conflictcCircular2 = GTitleset.circular1(
        [
          [120.190013, 30.268982, 1000],
          [120.172165, 30.296592, 1000],
          [120.167348, 30.32919, 1000],
        ],
        "#ab0709"
      );

      var imgIcon2 = GTitleset.flyicon(
        [120.190078, 30.268976, 1000],
        "UAV2.png"
      );
      imgIconList.push(imgIcon2);
      var timeout1 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.187985, 30.271713, 1000], "UAV2.png");
        GTitleset.setSecondWave([120.187985, 30.271713, 1000]);
        imgIconList.push(imgIcon2);
      }, 1500);
      var timeout2 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.186042, 30.274341, 1000], "UAV2.png");
        GTitleset.setSecondWave([120.186042, 30.274341, 1000]);
        imgIconList.push(imgIcon2);
      }, 3000);
      var timeout3 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.183382, 30.277156, 1000], "UAV2.png");
        GTitleset.setSecondWave([120.183382, 30.277156, 1000]);
        imgIconList.push(imgIcon2);
      }, 4500);
      var timeout4 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.181705, 30.279924, 1000], "UAV2.png");
        GTitleset.setSecondWave([120.181705, 30.279924, 1000]);
        imgIconList.push(imgIcon2);
      }, 6000);
      var timeout5 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.179449, 30.28289, 1000], "UAV2.png");
        GTitleset.setSecondWave([120.179449, 30.28289, 1000]);
        imgIconList.push(imgIcon2);
      }, 7500);
      var timeout9 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.177042, 30.285965, 1000], "UAV2.png");
        GTitleset.setSecondWave([120.177042, 30.285965, 1000]);
        imgIconList.push(imgIcon2);
      }, 9000);
      var timeout10 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.15209, 30.296735, 1000], "UAV2.png");
        GTitleset.setSecondWave([120.15209, 30.296735, 1000]);
        imgIconList.push(imgIcon2);
      }, 10500);

      var timeout6 = setTimeout(() => {
        message = ElMessage.warning({
          message: "发现航线冲突，已通知无人机悬停等待！",
          duration: 7000,
        });
      }, 2000);

      var timeout7 = setTimeout(() => {
        message = ElMessage.warning({
          message: "已通知无人机-大疆DJI MAVIC3 PRO 继续飞行！",
          duration: 7000,
        });
      }, 10500);

      var timeout8 = setTimeout(() => {
        message = ElMessage.warning({
          message: "已通知无人机-大疆DJI MAVIC 继续飞行！",
          duration: 7000,
        });
      }, 20500);

      setTimeout(() => {
        // 使用JavaScript添加类名来触发过渡效果
        const myDiv = document.getElementById("myDiv");
        myDiv.classList.add("show");
      }, 200);
      timeoutList.push(timeout1);
      timeoutList.push(timeout2);
      timeoutList.push(timeout3);
      timeoutList.push(timeout4);
      timeoutList.push(timeout5);
      timeoutList.push(timeout6);
      timeoutList.push(timeout7);
      timeoutList.push(timeout8);
      timeoutList.push(timeout9);
      timeoutList.push(timeout10);
      aMap.setZoomAndCenter(13, [120.170186, 30.295755, 600], false);
      break;
    case "QIXIANG":
      showJudgment.value = true;
      Judtext.value =
        "气象设备侦测降雨降雪,以设备为中心1000m为半径设置设备的警戒圈,当前区域降雨降雪通知警戒圈内的无人机注意避让。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.191093, 30.206219, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.193093, 30.206219, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      let imgIcon3 = GTitleset.flyicon(
        [120.231236, 30.223959, 100],
        "Frame4.png",
        [0.025, 0.03]
      );
      imgIconList.push(imgIcon3);
      trackList = [
        // 直线的轨迹
        [120.191093, 30.206219, 0],
        [120.214062, 30.213862, 50],
        [120.217873, 30.213008, 100],
        [120.212223, 30.210448, 40],
        [120.204563, 30.207263, 40],
        [120.197617, 30.205173, 40],
      ];
      //绘制曲线
      let Interfereline2 = GTitleset.meteorologicalShow(
        trackList,
        [120.229093, 30.229578, 100]
      );
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      WindSpeedsetTimeout = setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "前方降雨降雪,已通知飞手避让!",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/jiangyu.png";
        let timer = setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 2000);
        timeoutList.push(timer);
      }, 2000);
      timeoutList.push(WindSpeedsetTimeout);
      break;
    case "HeightLimit":
      isShowDetail.value = true;
      showJudgment.value = true;
      Judtext.value =
        "系统通过侦测设备识别到无人机飞出限制的高度,如适飞区超过120m、限高区超过限制高度,通知无人机已超出适飞高度，请立即下降。";
      HeightLimittext = GTitleset.createTag(
        [120.192276, 30.290202, 200],
        "限高120m"
      );
      imgIcon = GTitleset.flyicon(
        [120.180622, 30.288445, 20],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.180622, 30.288445, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      HeightLimitGeometry = GTitleset.CysGeometry(
        [120.182276, 30.290202],
        3000,
        120,
        "#ce2c29",
        {},
        250
      );
      //绘制曲线
      let HeightLimitline = GTitleset.curvetrajectory([
        [120.180622, 30.288445, 20],
        [120.181649, 30.288634, 25],
        [120.182244, 30.289163, 45],
        [120.182318, 30.290024, 45],
        [120.182793, 30.29006, 83],
        [120.183282, 30.289503, 200],
        [120.183561, 30.289379, 210],
        [120.184014, 30.289588, 190],
        [120.184514, 30.289288, 110],
        [120.185014, 30.289488, 90],
      ]);
      HeightLimitInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // message = ElMessage.warning({
          //   message: "发现无人机侵入，已通知飞手返航！",
          //   duration: 25000,
          // });
          // 清除定时器1
          if (HeightLimitInterval) {
            clearInterval(HeightLimitInterval);
          }
        }
      }, 200);
      HeightLimitsetTimeout = setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "发现无人机超出限制高度，已通知飞手降低高度！",
          duration: 6000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/heightlimit.png";
        let timer = setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 1000);
        timeoutList.push(timer);
      }, 6500);
      timeoutList.push(HeightLimitsetTimeout);
      aMap.setZoomAndCenter(17.8, [120.183952, 30.28418]);
      // aMap.setRotation();
      aMap.setPitch(90);
      break;
    case "Pianli":
      isShowDetail.value = true;
      showJudgment.value = true;
      Judtext.value =
        "根据无人机飞行计划中申请的空域为准,系统通过侦测设备识别到无人机飞出申请的空域范围则判定为偏离空域,通知无人机偏离空域,请立即返航。";
      imgIcon = GTitleset.flyicon(
        [120.012337, 30.18361, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.012337, 30.18361, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      //绘制曲线
      let lineNew = GTitleset.curvetrajectory([
        [120.012337, 30.18361, 0],
        [120.012032, 30.18662, 100],
        [120.010479, 30.158292, 120],
      ]);

      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          showWarninginformation.value = true;
          imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/intrusion.png";
          let timer = setTimeout(() => {
            // 屏闪
            flicker();
            alarmNameNum.value = "飞出申请空域，请及时关注!";
            waringAction();
            message = ElMessage.warning({
              message: "通知无人机偏离空域,请立即返航。",
              duration: 25000,
            });
            // 使用JavaScript添加类名来触发过渡效果
            const myDiv = document.getElementById("myDiv");
            myDiv.classList.add("show");
          }, 1500);
          timeoutList.push(timer);
          drawLinePianLi();
          // 清除定时器1
          if (Interval1) {
            clearInterval(Interval1);
          }
          //清除图标
          GTitleset.remove(imgIcon);
        }
      }, 200);

      cylinder = GTitleset.CysGeometry(
        [120.012337, 30.18361],
        3000,
        700,
        "#292cce",
        {
          airTypeId: 1258365545,
        }
      );
      aMap.setZoomAndCenter(13, [120.011138, 30.146994], false);
      break;
    case "REQIQIU":
      showJudgment.value = true;
      Judtext.value =
        "以热气球为中心半径 2 公里，真高 100 米设置空域;无人机进入该空域对其进行通知要求其避让或返航离开其空域范围。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      waringAction();
      // clickWaringFunTrue();
      trackList = [
        [120.18193245, 30.29375707, 0],
        [120.18588066, 30.29372002, 100],
        [120.18982887, 30.29360885, 100],
        [120.19347668, 30.29349769, 100],
        [120.19776821, 30.29346063, 100],
        [120.20175934, 30.2932383, 100],
        [120.2058363, 30.28916419, 100],
        [120.20974159, 30.2892383, 100],
        [120.21403313, 30.28997891, 100],
        [120.21819592, 30.29271952, 100],
        [120.22184372, 30.29253424, 100],
        [120.2251482, 30.29231191, 100],
      ];
      //绘制曲线
      let Interfereline1 = GTitleset.exampleTrack(trackList);

      let deviceIcon1 = GController.drawBalloonMarker(
        [120.20974159, 30.2982383],
        "reqiqiu2.png"
      );
      // imgIconList.push(deviceIcon1);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      let timer2 = setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "前方发现热气球，已通知飞手避让！",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/balloon.png";
        setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 500);
      }, 3000);
      timeoutList.push(timer2);
      aMap.setZoomAndCenter(14.7, [120.20974159, 30.2952383], false);
      break;
    case "ZHISHENGJI":
      showJudgment.value = true;
      Judtext.value =
        "以直升机为中心半径 5 公里，真高 300 米;无人机进入该空域对其进行通知要求其避让或返航离开其空域范围。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.185019, 30.294787, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      waringAction();

      // //绘制曲线
      var line = GTitleset.curvetrajectory([
        [120.185019, 30.294787, 0],
        [120.201275, 30.294052, 100],
      ]);
      // 第一架次（第二次飞行）
      ConflictInterval2 = setInterval(() => {
        var stopInterval2 = GTitleset.moveOnCurve(imgIcon, "#ff0000", true);
        if (stopInterval2 == "stop") {
          // 清除定时器1
          if (ConflictInterval2) {
            clearInterval(ConflictInterval2);
          }
        }
      }, 200);
      intervalList.push(ConflictInterval2);
      let timer4 = setTimeout(() => {
        GTitleset.remove(imgIcon);
        imgIcon = GTitleset.flyicon(
          [120.201275, 30.294052, 100],
          "UAVNormalFly.png"
        );
        var line2 = GTitleset.curvetrajectory([
          [120.201275, 30.294052, 100],
          [120.193321, 30.290025, 100],
        ]);
        // 第一架次（第二次飞行）
        var ConflictInterval3 = setInterval(() => {
          var stopInterval3 = GTitleset.moveOnCurve(imgIcon, "#ff0000", true);
          if (stopInterval3 == "stop") {
            // 清除定时器1
            if (ConflictInterval3) {
              clearInterval(ConflictInterval3);
            }
          }
        }, 200);
        intervalList.push(ConflictInterval3);
      }, 6000);
      timeoutList.push(timer4);

      let deviceIcon3 = GTitleset.flyicon(
        [120.209714, 30.28921, 100],
        "helicopter.png",
        [0.04, 0.04]
      );
      var timeout1 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        deviceIcon3 = GTitleset.flyicon(
          [120.207944, 30.290318, 0],
          "helicopter.png",
          [0.04, 0.04]
        );
        imgIconList.push(deviceIcon3);
      }, 1000);
      var timeout2 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        deviceIcon3 = GTitleset.flyicon(
          [120.207352, 30.292094, 0],
          "helicopter.png",
          [0.04, 0.04]
        );
        imgIconList.push(deviceIcon3);
      }, 2500);
      var timeout3 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        deviceIcon3 = GTitleset.flyicon(
          [120.206757, 30.293769, 0],
          "helicopter.png",
          [0.04, 0.04]
        );
        imgIconList.push(deviceIcon3);
      }, 4000);
      var timeout4 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        deviceIcon3 = GTitleset.flyicon(
          [120.206282, 30.295993, 0],
          "helicopter.png",
          [0.04, 0.04]
        );
        imgIconList.push(deviceIcon3);
      }, 5500);
      var timeout5 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        deviceIcon3 = GTitleset.flyicon(
          [120.205724, 30.298343, 0],
          "helicopter.png",
          [0.04, 0.04]
        );
        imgIconList.push(deviceIcon3);
      }, 7000);
      var timeout6 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        deviceIcon3 = GTitleset.flyicon(
          [120.204921, 30.301493, 0],
          "helicopter.png",
          [0.04, 0.04]
        );
        imgIconList.push(deviceIcon3);
      }, 8500);
      var timeout7 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        deviceIcon3 = GTitleset.flyicon(
          [120.204447, 30.30387, 0],
          "helicopter.png",
          [0.04, 0.04]
        );
        imgIconList.push(deviceIcon3);
      }, 10000);
      var timeout8 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        deviceIcon3 = GTitleset.flyicon(
          [120.203891, 30.307144, 0],
          "helicopter.png",
          [0.04, 0.04]
        );
        imgIconList.push(deviceIcon3);
      }, 11500);
      timeoutList.push(timeout1);
      timeoutList.push(timeout2);
      timeoutList.push(timeout3);
      timeoutList.push(timeout4);
      timeoutList.push(timeout5);
      timeoutList.push(timeout6);
      timeoutList.push(timeout7);
      timeoutList.push(timeout8);
      let deviceIcon4 = null;
      var timeout9 = setTimeout(() => {
        GTitleset.remove(deviceIcon3);
        GTitleset.remove(imgIcon);
        deviceIcon4 = GTitleset.flyicon(
          [120.193321, 30.290025, 0],
          "UAVNormalFly.png"
        );

        var line3 = GTitleset.curvetrajectory([
          [120.193321, 30.290025, 100],
          [120.206784, 30.29284, 100],
          [120.219767, 30.294815, 100],
          [120.225266, 30.298164, 100],
        ]);
        // 第一架次（第二次飞行）
        var ConflictInterval4 = setInterval(() => {
          var stopInterval4 = GTitleset.moveOnCurve(
            deviceIcon4,
            "#ff0000",
            true
          );
          // let stopIntervalText = GTitleset.moveOnCurveText(imgicon, "#ffffff");
          if (stopInterval4 == "stop") {
            GTitleset.remove(deviceIcon4);
            // 清除定时器1
            if (ConflictInterval4) {
              clearInterval(ConflictInterval4);
            }
          }
        }, 200);
        intervalList.push(ConflictInterval4);
      }, 12000);
      timeoutList.push(timeout9);
      imgIconList.push(deviceIcon3);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      var timeout10 = setTimeout(() => {
        message = ElMessage.warning({
          message: "前方发现直升机，已通知飞手避让！",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/balloon.png";
        setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 500);
      }, 6000);
      timeoutList.push(timeout10);
      aMap.setZoomAndCenter(14.7, [120.20974159, 30.2952383], false);
      break;
    case "FEITING":
      showJudgment.value = true;
      Judtext.value =
        "以飞艇为中心半径 2 公里，真高 100 米设置空域;无人机进入该空域对其进行通知要求其避让或返航离开其空域范围。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      waringAction();
      // clickWaringFunTrue();
      trackList = [
        [120.18193245, 30.29375707, 0],
        [120.18588066, 30.29372002, 100],
        [120.18982887, 30.29360885, 100],
        [120.19347668, 30.29349769, 100],
        [120.19776821, 30.29346063, 100],
        [120.20175934, 30.2932383, 100],
        [120.2058363, 30.28916419, 100],
        [120.20974159, 30.2892383, 100],
        [120.21403313, 30.28997891, 100],
        [120.21819592, 30.29271952, 100],
        [120.22184372, 30.29253424, 100],
        [120.2251482, 30.29231191, 100],
      ];
      //绘制曲线
      let InterferelineFT = GTitleset.exampleTrack(trackList);
      let deviceIcon2 = GTitleset.flyicon(
        [120.20974159, 30.2952383, 100],
        "airship.png",
        [0.04, 0.04]
      );
      imgIconList.push(deviceIcon2);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "前方发现飞艇，已通知飞手避让！",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/balloon.png";
        setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 500);
      }, 3000);
      aMap.setZoomAndCenter(14.7, [120.20974159, 30.2952383], false);
      break;
    case "HANGMO":
      showJudgment.value = true;
      Judtext.value =
        "以航模为中心半径 2 公里，真高 200 米设置空域;无人机进入该空域对其进行通知要求其避让或返航离开其空域范围。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      waringAction();
      // clickWaringFunTrue();
      trackList = [
        [120.18193245, 30.29375707, 0],
        [120.18588066, 30.29372002, 100],
        [120.18982887, 30.29360885, 100],
        [120.19347668, 30.29349769, 100],
        [120.19776821, 30.29346063, 100],
        [120.20175934, 30.2932383, 100],
        [120.2058363, 30.28916419, 100],
        [120.20974159, 30.2892383, 100],
        [120.21403313, 30.28997891, 100],
        [120.21819592, 30.29271952, 100],
        [120.22184372, 30.29253424, 100],
        [120.2251482, 30.29231191, 100],
      ];
      //绘制曲线
      let InterferelineHM = GTitleset.exampleTrack(trackList);
      let deviceIconHM = GTitleset.flyicon(
        [120.20974159, 30.2952383, 200],
        "hangmo.png",
        [0.04, 0.04]
      );
      imgIconList.push(deviceIconHM);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "前方发现航模，已通知飞手避让！",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/balloon.png";
        setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 500);
      }, 3000);
      aMap.setZoomAndCenter(14.7, [120.20974159, 30.2952383], false);
      break;
    case "PopularAreas":
      isShowDetail.value = true;
      showJudgment.value = true;
      Judtext.value =
        "基于民用无人机监管平台,同一时间段某个范围内出现大量无人机判定为热门飞行区域,通知即将进入到该区域的无人机注意关注以免发生冲突";
      imgIcon = GTitleset.flyicon(
        [120.184017, 30.236782, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.184017, 30.236782, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      // 绘制曲线
      let PopularAreasline = GTitleset.curvetrajectory([
        [120.184017, 30.236782, 0],
        [120.194907, 30.248187, 0],
        [120.199695, 30.246033, 120],
        [120.203179, 30.247752, 120],
        [120.2081, 30.25059, 100],
        [120.21042, 30.252878, 90],
        [120.213043, 30.254678, 80],
        [120.217873, 30.257642, 100],
        [120.217055, 30.263756, 100],
      ]);
      PopularAreasInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // message = ElMessage.warning({
          //   message: "发现无人机侵入，已通知飞手返航！",
          //   duration: 25000,
          // });
          // 清除定时器1
          if (PopularAreasInterval) {
            clearInterval(PopularAreasInterval);
          }
        }
      }, 200);
      PopularAreassetTimeout = setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "已通知飞手途径热门区域",
          duration: 6000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/Popular.png";
        setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 1000);
      }, 2000);
      timeoutList.push(PopularAreassetTimeout);
      aMap.setZoomAndCenter(14, [120.210609, 30.248366]);
      GController.drawheatmap();
      break;
    case "CrashPoint":
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.153727, 30.262098, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.153727, 30.262098, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      // 绘制曲线
      let CrashPointline = GTitleset.curvetrajectory([
        [120.153727, 30.262098, 0],
        [120.156104, 30.260579, 100],
        [120.157106, 30.259451, 100],
        [120.159567, 30.259304, 100],
        [120.161533, 30.259358, 100],
        [120.163002, 30.259002, 100],
        [120.165548, 30.257577, 100],
        [120.164754, 30.261251, 100],
        [120.162865, 30.264274, 100],
        [120.159209, 30.264845, 100],
      ]);
      GController.drawPopularPoints();
      CrashPointInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon, "#e63f31");
        if (stopInterval == "stop") {
          // message = ElMessage.warning({
          //   message: "发现无人机侵入，已通知飞手返航！",
          //   duration: 25000,
          // });
          // 清除定时器1
          if (CrashPointInterval) {
            clearInterval(CrashPointInterval);
          }
        }
      }, 200);
      CrashPointTimeout = setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "已通知飞手途径坠机多发区",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/Crash.png";
        let timer = setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 1000);
        timeoutList.push(timer);
      }, 2000);
      timeoutList.push(CrashPointTimeout);
      aMap.setZoomAndCenter(14.7, [120.158505, 30.257189]);
      break;
    case "WindSpeed":
      showJudgment.value = true;
      Judtext.value =
        "气象设备侦测风力风速,无人机的最低抗风等级为4级,以设备为中心1000m为半径设置设备的警戒圈,当前区域出现4级风以上通知警戒圈内的无人机注意避让。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.191093, 30.206219, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.191093, 30.206219, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      // let imgIcon4 = GTitleset.flyicon(
      //   [120.114879, 30.314998, 10],
      //   "equipmentMeteorology.png"
      // );
      // imgIconList.push(imgIcon4);
      // windicon = GController.drawwindicon();
      // windicon.on("click", function (e) {
      //   showdevivedialog.value = true;
      // });
      let imgIconW3 = GTitleset.flyicon(
        [120.22914, 30.219614, 100],
        "Frame4.png",
        [0.025, 0.03]
      );
      imgIconList.push(imgIconW3);
      trackList = [
        // 直线的轨迹
        [120.191093, 30.206219, 0],
        [120.214062, 30.213862, 50],
        [120.217873, 30.213008, 100],
        [120.212223, 30.210448, 40],
        [120.204563, 30.207263, 40],
        [120.197617, 30.205173, 40],
      ];
      let deviceIconW = GController.drawLabelMarker2(
        [120.237482, 30.222614],
        "tornado4.png",
        "null",
        [200, 200]
      );
      //绘制曲线
      particles = GTitleset.windShow(trackList, [120.229093, 30.229578, 100]);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      WindSpeedsetTimeout = setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "前方有4级风力干扰,已通知飞手避让!",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/meteorological.png";
        setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 1000);
      }, 1000);
      timeoutList.push(WindSpeedsetTimeout);
      break;
    case "CounterWarning":
      isShowDetail.value = true;
      showJudgment.value = true;
      Judtext.value =
        "无线电干扰设备开启时会形成电磁干扰。当设备处于开启状态时，对其1000m范围内的无人机进行通知,提醒无人机注意避让。";
      imgIcon = GTitleset.flyicon(
        [120.051559, 30.258157, 0],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [120.051559, 30.258157, 0],
        "flyHandBB.png",
        [0.025, 0.03]
      );
      // 重点单位图标
      importantFirm = GTitleset.flyicon(
        [120.101225, 30.259237, 0],
        "importantFirm.png",
        [0.025, 0.03]
      );
      directionalMarker = GController.drawdirectional();
      aMap.setZoomAndCenter(14, [120.101225, 30.262237]);
      aMap.setPitch(0);
      GController.equipmentType_draw();
      // 绘制曲线
      let CounterWarningline = GTitleset.curvetrajectory([
        [120.051559, 30.258157, 0],
        [120.085066, 30.262168, 500],
        [120.084882, 30.261551, 500],
        [120.052331, 30.256637, 500],
      ]);
      CounterWarningInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon, "#e63f31");
        if (stopInterval == "stop") {
          // message = ElMessage.warning({
          //   message: "发现无人机侵入，已通知飞手返航！",
          //   duration: 25000,
          // });
          // 清除定时器1
          if (CounterWarningInterval) {
            clearInterval(CounterWarningInterval);
          }
        }
      }, 200);
      CounterWarningsetTimeout = setTimeout(() => {
        // 屏闪
        flicker();
        message = ElMessage.warning({
          message: "前方有电磁干扰,已通知飞手避让!",
          duration: 10000,
        });
        showWarninginformation.value = true;
        imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/electromagnetic.png";
        setTimeout(() => {
          // 使用JavaScript添加类名来触发过渡效果
          const myDiv = document.getElementById("myDiv");
          myDiv.classList.add("show");
        }, 1000);
        timeoutList.push(CounterWarningsetTimeout);
      }, 1000);
      break;
    case "DUOFA":
      duofa();
      break;
    default:
      break;
  }

  imgIconList.push(imgIcon);
}
/**
 * @description: 执行清除
 */
const clearall = () => {
  dialogVisible.value = false;
  let airspace = [...footBtnsStore.defaultAirspace];
  showWarninginformation.value = false; //预警弹窗
  showJudgment.value = false;
  isShowDemo.value = false;
  clear();
  airspace.forEach((item) => {
    hideAirspace(item);
  });
  clearImmediate();
  GTitleset.remove(minhangimgiconTitle);
  GTitleset.clearRemovedrawlLine();
  isShowDetail.value = false;
  alarmWaringVisible.value = false;
  tabsWaringVisible.value = false;
  mqttStore.rebackMqttWaring();
  // mqttMsg();
  defaultPerspect();
  if (pontDataMH) GTitleset.remove(pontDataMH);
  if (pontDataMH1) GTitleset.remove(pontDataMH1);
  if (pontDataMH2) GTitleset.remove(pontDataMH2);
  if (pontDataMH3) GTitleset.remove(pontDataMH3);
  if (pontDataMH4) GTitleset.remove(pontDataMH4);
  if (pontDataMH5) GTitleset.remove(pontDataMH5);
  if (pontDataMH6) GTitleset.remove(pontDataMH6);
  GTitleset.remove(importantFirm);
  GTitleset.remove(Invasionline1);
  GTitleset.remove(circular1);
  // GTitleset.remove(firstIcon);
  GTitleset.remove(firstTitle);
  // GTitleset.remove(secondIcon);
  GTitleset.remove(secondTitle);
  GTitleset.remove(conflictcCircular1);
  GTitleset.remove(conflictcCircular2);
  GTitleset.remove(flyPeopleIcon);
  GTitleset.remove(flyPeopleIcon1);
  GTitleset.remove(flyPeopleLine);
  GTitleset.remove(flyPeopleLine1);
  // 清除几何体
  GTitleset.removeCysGeometry(1258365545);
  cylinder = null;
  GTitleset.clearAtmosphere();
  // imgIcon = null;
  // 清除定时器
  timeoutList.forEach((item) => {
    clearTimeout(item);
  });
  timeoutList = [];
  intervalList.forEach((item) => {
    clearInterval(item);
  });
  intervalList = [];
  // 清除图片
  imgIconList.forEach((item) => {
    GTitleset.remove(item);
  });
  imgIconList = [];
  defaultPerspect();
  clearInterval(invasionInterval);
  clearInterval(InvasionInterval2);
  clearInterval(InvasionInterval3);
  clearInterval(InvasionInterval4);
  clearInterval(updataInterval);
  clearTimeout(duofaTimeOut);
  // 清除定时器1
  if (Interval1) {
    clearInterval(Interval1);
  }
  if (setTimeout1) {
    clearTimeout(setTimeout1);
  }
  if (setTimeout2) {
    clearTimeout(setTimeout2);
  }
  if (setTimeout3) {
    clearTimeout(setTimeout3);
  }
  if (message) {
    message.close();
  }
  // if (markerPoint.length > 0) {
  //   markerPoint.forEach((id) => {
  //     aMap.remove(id);
  //   });
  // }
  //航线冲突预警
  if (ConflictInterval2) {
    clearInterval(ConflictInterval2);
  }
  //电磁干扰清除
  if (Interferesettimeout) {
    clearTimeout(Interferesettimeout);
  }
  //限高演示的清除
  if (HeightLimitInterval) {
    clearInterval(HeightLimitInterval);
  }
  // 清除圆柱
  GTitleset.remove(HeightLimitGeometry);
  //清除限高文字
  GTitleset.remove(HeightLimittext);

  // 热门区域清除//
  if (PopularAreasInterval) {
    clearInterval(PopularAreasInterval);
  }
  //清除热力图
  GController.removeheatmap();
  //清除热门区域文字
  // GTitleset.remove(PopularAreastext);

  // 坠机区域清除//
  //清除坠机区域文字
  GTitleset.remove(CrashPointtext);
  if (CrashPointInterval) {
    clearInterval(CrashPointInterval);
  }
  GController.removeMassPoint("PopularPoints");
  GController.removeMassPoint("reqiqiu");
  GController.removeMassPoint("duofa");

  //风速预警清除//
  showdevivedialog.value = false;
  GTitleset.clearparticles();
  if (windicon) {
    aMap.remove(windicon);
  }
  //清除反制演示//
  if (CounterWarningInterval) {
    clearInterval(CounterWarningInterval);
  }
  if (directionalMarker) {
    aMap.remove(directionalMarker);
  }
  GController.clearEquipment();

  return;
};

/**
 * @description: 绘制第二段线
 */
let Interval2;
const drawLine2 = () => {
  let imgicon = GTitleset.flyicon(
    [120.222442, 30.21338, 300],
    "UAVNormalFly.png"
  );
  alarmNameNum.value = "飞入管控区，请及时关注!";
  waringAction();
  // clickWaringFunTrue();
  imgIconList.push(imgicon);
  //绘制曲线
  let line1 = GTitleset.curvetrajectory([
    [120.222442, 30.21338, 300],
    [120.223553, 30.214516, 300],
    [120.223623, 30.215531, 300],
    [120.22315, 30.216124, 300],
    [120.222378, 30.216551, 300],
    [120.221412, 30.216642, 300],
    [120.220251, 30.216049, 300],
    [120.219554, 30.215085, 300],
  ]);
  Interval2 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon, "#ff0000");
    if (stopInterval == "stop") {
      // 第三段轨迹
      drawLine3();
      // 清除定时器1
      if (Interval2) {
        clearInterval(Interval2);
      }
      //清除图标
      GTitleset.remove(imgicon);
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};
/**
 * @description: 绘制第三段线
 */
let Interval3;
const drawLine3 = () => {
  let imgicon = GTitleset.flyicon(
    [120.219554, 30.215085, 300],
    "UAVNormalFly.png"
  );
  imgIconList.push(imgicon);
  //绘制曲线
  let line3 = GTitleset.curvetrajectory([
    [120.219554, 30.215085, 300],
    [120.217936, 30.212953, 300],
    [120.215275, 30.211655, 0],
  ]);
  Interval3 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon);
    if (stopInterval == "stop") {
      clear();
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};

/**
 * @description: 偏离空域绘制第2段线
 */
const drawLinePianLi = () => {
  let imgicon = GTitleset.flyicon(
    [120.010479, 30.158292, 120],
    "UAVNormalFly.png"
  );
  // clickWaringFunTrue();
  imgIconList.push(imgicon);
  //绘制曲线
  let line1 = GTitleset.curvetrajectory([
    [120.010479, 30.158292, 120],
    [119.988895, 30.146845, 80],
    [119.988862, 30.170695, 70],
  ]);
  Interval2 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon, "#ff0000");
    if (stopInterval == "stop") {
      // 第三段轨迹
      drawLinePianLi2();
      // 清除定时器1
      if (Interval2) {
        clearInterval(Interval2);
      }
      //清除图标
      GTitleset.remove(imgicon);
    }
  }, 200);
};
/**
 * @description: 偏离空域绘制第3段线
 */
const drawLinePianLi2 = () => {
  let imgicon = GTitleset.flyicon(
    [119.988862, 30.170695, 70],
    "UAVNormalFly.png"
  );
  imgIconList.push(imgicon);
  //绘制曲线
  let line3 = GTitleset.curvetrajectory([
    [119.988862, 30.170695, 70],
    [119.999979, 30.185935, 20],
  ]);
  Interval3 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon);
    if (stopInterval == "stop") {
      clear();
    }
  }, 200);
};
/**
 * @description: 清除定时器
 */
const clear = () => {
  // 清除定时器1
  if (Interval1) {
    clearInterval(Interval1);
  }
  // 清除定时器2
  if (Interval2) {
    clearInterval(Interval2);
  }
  // 清除定时器3
  if (Interval3) {
    clearInterval(Interval3);
  }
};
/**
 * @无人机侵入演示   》》》》》》》》》》eg
 */
/**
 * @无人机侵出演示   》》》》》》》》》》eg
 */
/**
 * @description: 绘制第二段线
 */
const InvasiondrawLine2 = () => {
  let imgicon = GTitleset.flyicon(
    [120.138806, 30.270621, 1000],
    "UAVNormalFly.png"
  );

  imgIconList.push(imgicon);
  //绘制曲线
  let line2 = GTitleset.curvetrajectory([
    [120.138806, 30.270621, 1000],
    [120.138648, 30.280505, 1000],
    [120.14466, 30.281415, 1000],
    [120.151174, 30.273545, 1000],
  ]);
  InvasionInterval2 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon, "#ff0000");
    if (stopInterval == "stop") {
      InvasiondrawLineNew();
      // 清除定时器1
      if (InvasionInterval2) {
        clearInterval(InvasionInterval2);
      }
      //清除图标
      GTitleset.remove(imgicon);
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};

/**
 * @description: 侵出预警第三条线
 */
let InvasionInterval4;
const InvasiondrawLineNew = () => {
  let imgicon = GTitleset.flyicon(
    [120.151174, 30.273545, 1000],
    "UAVNormalFly.png"
  );
  imgIconList.push(imgicon);
  //绘制曲线
  let line3 = GTitleset.curvetrajectory([
    [120.151174, 30.273545, 1000],
    [120.173595, 30.278737, 1000],
    [120.19939, 30.282722, 1000],
  ]);
  InvasionInterval4 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon);
    if (stopInterval == "stop") {
      // 清除定时器1
      if (InvasionInterval4) {
        clearInterval(InvasionInterval4);
      }
    }
  }, 200);
};

/**
 * @description: 绘制第三段线
 */
let InvasionInterval3;
const InvasiondrawLine3 = () => {
  let imgicon = GTitleset.flyicon(
    [120.12717032476095, 30.204071932212027, 1000],
    "UAVNormalFly.png"
  );
  imgIconList.push(imgicon);
  //绘制曲线
  let line3 = GTitleset.curvetrajectory([
    [120.12717032476095, 30.204071932212027, 1000],
    [120.17580074284429, 30.220185941065505, 1000],
  ]);
  InvasionInterval3 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon);
    if (stopInterval == "stop") {
      // 清除定时器1
      if (InvasionInterval3) {
        clearInterval(InvasionInterval3);
      }
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};

/**
 * @description: 绘制段线
 */
let InvasionIntervald;
const InvasiondrawLined = () => {
  // let pontData = [
  //   {
  //     longitude: 120.42314258,
  //     latitude: 30.13369761,
  //     icon: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/UAVBlackFly1.png",
  //   },
  // ];
  alarmNameNum.value =
    "发现民航飞机（CA5527）当前位置附近存在无人机驾驶航空器，已通知相关人员及时避让。";
  waringAction();
  showWarninginformation.value = true;
  imgurl.value = import.meta.env.VITE_BASE_PUBLICPATH + "/img/message/civil.png";
  setTimeout(() => {
    // 使用JavaScript添加类名来触发过渡效果
    const myDiv = document.getElementById("myDiv");
    myDiv.classList.add("show");
  }, 200);
  // clickWaringFunTrue();
  // markerGeoPoint = GController.drawIconTemp(pontData, true);
  imgIcon = GTitleset.flyicon(
    [120.29582977, 30.18668309, 600],
    "minghangRight.png"
  );
  minhangimgiconTitle = GTitleset.createTag(
    [120.29582977, 30.18668309, 600],
    `HBH3293`
  );
  GTitleset.diffusionwave(2);
  //绘制曲线
  let line2 = GTitleset.curvetrajectory([
    [120.29582977, 30.18668309, 600],
    [120.30784607, 30.18905718, 420],
    [120.38028717, 30.20715777, 210],
    [120.41461945, 30.22139851, 90],
    [120.42114258, 30.22369761, 60],
    [120.42865276, 30.22699782, 0],
  ]);
  let line3 = GTitleset.curvetrajectory2([
    [120.29582977, 30.18668309, 600],
    [120.30784607, 30.18905718, 420],
    [120.38028717, 30.20715777, 210],
    [120.41461945, 30.22139851, 90],
    [120.42114258, 30.22369761, 60],
    [120.42865276, 30.22699782, 0],
  ]);
  InvasionIntervald = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(
      imgIcon,
      "#ff0000",
      true,
      false,
      "MINHANG"
    );
    let stopInterval2 = GTitleset.moveOnCurve2(
      minhangimgiconTitle,
      "#ff0000",
      true,
      false,
      "MINHANG"
    );
    if (stopInterval == "stop" && stopInterval2 == "stop") {
      // InvasiondrawLine3();
      // 清除定时器1
      if (InvasionIntervald) {
        // clearInterval(InvasionIntervald);
      }
      //清除图标
      // GTitleset.remove(imgicon);
    }
  }, 200);

  imgIconList.push(imgIcon);
};
const clearImmediate = () => {
  if (markerGeoPoint.length > 0) {
    markerGeoPoint.forEach((id) => {
      aMap.remove(id);
    });
  }
  // 清除定时器
  if (Intervalminhang) {
    clearInterval(Intervalminhang);
  }
  Intervalminhang = null;
  if (InvasionIntervald) {
    clearInterval(InvasionIntervald);
  }
  InvasionIntervald = null;
  //清除图标
  GTitleset.remove(minhangimgicon);
};
/**
 * @无人机侵出演示   》》》》》》》》》》eg
 */

/**
 * @无人机航线冲突预警演示   》》》》》》》》》》eg
 */
// /**
//  * @description: 绘制冲突预警的线
//  */
// const ConflictdrawLine2 = () => {
//   let imgicon = GTitleset.flyicon(
//     [120.44089, 30.84722, 300],
//     "UAVNormalFly.png"
//   );
//   //绘制曲线
//   let line2 = GTitleset.curvetrajectory([
//     [120.162853, 30.204618, 1000],
//     [120.14294, 30.240811, 1000],
//   ]);
//   ConflictInterval2 = setInterval(() => {
//     let stopInterval = GTitleset.moveOnCurve(imgicon, "#ff0000");
//     if (stopInterval == "stop") {
//       // 清除定时器1
//       if (ConflictInterval2) {
//         clearInterval(ConflictInterval2);
//       }
//     }
//   }, 200);
//   // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
//   // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
// };

/**
 * @无人机航线冲突预警演示   》》》》》》》》》》eg
 */

function clickWaringFunTrue() {
  clickWaringDis.value = true;
}

function clickWaringFun() {
  clickWaringDis.value = false;
}

function waringAction() {
  alarmWaringVisible.value = true;
}

function closeWaringAction() {
  alarmWaringVisible.value = false;
}

function isTabsShowFun() {
  tabsWaringVisible.value = true;
}

function showWaringTabs2() {
  tabsWaringVisible.value = false;
}

// ------------------------------------------------------------动画播放-------------------------------------------------------//
let pagView = null;

function initialization() {
  PAGInit().then((PAG) => {
    let url = null;
    url = import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/actionVideo.pag";
    fetch(url)
      .then((response) => response.blob())
      .then(async (blob) => {
        const file = new window.File(
          [blob],
          url.replace(/(.*\/)*([^.]+)/i, "$2")
        );
        const pagFile = await PAG.PAGFile.load(file);
        let canvas = null;
        canvas = document.getElementById("markCanvas");

        // 解决清晰度问题
        canvas.width = pagFile.width() * window.devicePixelRatio;
        canvas.height = pagFile.height() * window.devicePixelRatio;
        // 自适应
        pagView = await PAG.PAGView.init(pagFile, canvas, {
          useScale: false,
        });
        // 高清渲染
        // pagView = await PAG.PAGView.init(pagFile, "#pag");
        canvas.style.zIndex = 999;
        pagView.setRepeatCount(0);
        await pagView.play();

        setTimeout(() => {
          // whoFirst.value = false
          skipShow.value = false;
          if (!clickOk) {
            immediatelyShow.value = true;
          }
        }, 10000);
        setTimeout(() => {
          skipShow.value = true;
        }, 4000);
        setTimeout(() => {
          init();
          mqttMsg();
        }, 2000);
      });
  });
}

let clickOk = false;
function skipFun() {
  skipShow.value = false;
  whoFirst.value = false;
  whoFirst2.value = true;
  clickOk = true;
}

function immediatelyClick() {
  whoFirst.value = false;
  immediatelyShow.value = false;
  whoFirst2.value = true;
}

// ------------------------------------------------------------动画播放结束-------------------------------------------------------//

// 地图对象
let takeEffectView = null;
function viewObject(val) {
  takeEffectView = val;
}

const TabsVisible = computed(() => {
  return flyTaskStore.TabsVisible;
});

/**
 * @关闭card弹窗
 */
function visibleClose(val) {
  if (val === "airline" && isRouteAirLine) routeInforVisible.value = true;
  dialogVisible.value = false;
  defaultPerspect();
  if (typeCard.value === "plane") {
    removeCurPlaneLine();
    isShowDetail.value = false;
  }
  typeCard.value = null;
}

function managerVisibleClose() {
  managerTabsVisible.value = false;
  childComponentRef.value.flyPlanClickStop();
  // childComponentRef.value.controlFlyPlan();
}

function WarningVisibleClose() {
  waringVisible.value = false;
  childComponentRef.value.waringClickStop();
  // childComponentRef.value.controlWaring();
}

function routeVisibleClose() {
  routeInforVisible.value = false;
  isRouteAirLine = false;
}

// 打开预警事件历史记录弹窗
function waringClick() {
  waringVisible.value = true;
  visibleClose();
  routeVisibleClose();
  waringTabsRef.value.getListFun();
}

// 打开飞行计划弹窗
function flyPlanClick() {
  managerTabsVisible.value = true;
  visibleClose();
  routeVisibleClose();
  flyingTabsRef.value.getListFun();
}

let showTabsType = "";
window.tabsType = false;
function ManagerTabsExpand(val) {
  window.tabsType = val;
  showTabsType = "flying";
  childComponentRef.value.controlFlyPlan();
  managerTabsVisible.value = false;
  // viewer.value.trajectoryAnimation(); // 动画轨迹
}

function waringExpand(val) {
  window.tabsType = val;
  showTabsType = "waring";
  childComponentRef.value.controlWaring();
  waringVisible.value = false;
  // viewer.value.trajectoryAnimation();
}

function alarmTabsNo(val) {
  window.tabsType = val;
  showTabsType = "";
}

function flyPlanClose() {
  managerTabsVisible.value = true;
  tabs.value.tabsVisibleClose();
}

function waringClose() {
  waringVisible.value = true;
  tabs.value.tabsVisibleClose();
}

function showWaringTabs() {
  if (showTabsType === "flying") {
    managerTabsVisible.value = true;
  } else if (showTabsType === "waring") {
    waringVisible.value = true;
  }
}

// 视屏流播放
function videoPlayFun(value) {
  videoStreamVisible.value = true;
  videoStreamRef.value.createVideo(value);
}

// 关闭视屏流弹窗
function closeVideoCard() {
  videoStreamVisible.value = false;
}

let isRouteAirLine = false;

function routeClick(val) {
  routeInforVisible.value = true;
  isRouteAirLine = true;
  routeRef.value.getListFun(val);
}

/**
 * @修改是否显示详情
 */
const changeIsShowDetail = () => {
  isShowDetail.value = !isShowDetail.value;
};
// ----------------------------------------------   地图初始化  ---------------------------------------------------------------

let GTitleset = null;
let GController = null;
let aMap = null;
let scene = null;
// let mapCenter = [120.155125, 30.264725];
let mapCenter = [120.180924, 30.186115];
let mapID = "cesiumContainer";

const init = () => {
  if (aMap) return;
  GController = new Controller(mapCenter, openPop);
  aMap = GController.initMap(mapID, changeDefaultView, suoFangDefaultView);
  aMap = GController.initMap(mapID, changeDefaultView, suoFangDefaultView);
  aMap.on("complete", () => {
    GTitleset = new Threesence(
      aMap,
      openPop,
      window.innerWidth,
      window.innerHeight,
      true
    );
    scene = GTitleset.initThree(mapCenter, mapID);
  });
};

let viewer = ref();

function viewDefault() {
  // childComponentRef.value.defaultChange();
}
//测距
function ranging(val) {
  GController.drawRanging(val);
}
//默认视角
function defaultPerspect() {
  GController.defaultAngle(defaultViewShow);
}

function defaultViewShow() {
  childComponentRef.value.defaultChange();
}

function waringShowView() {
  // 点击预警演示后显示弹窗
  isWaringShow.value = true;
}

function waringShowViewClose() {
  isWaringShow.value = false;
  if (checkWaring.value.length > 0) {
    checkWaring.value = [];
    handleCheckAllChange([]);
  }
}

// ----------------------------------------------     mqtt    ------------------------------------------------------------

//  配置MQTT
let client = null; // 实例
let aircraftTopic = import.meta.env.VITE_BASE_MQTT; // 飞行器主题
let langFlagTopic = "landFlag/123"; // 降落主题
let weatherTopic = "weather/warn"; // 小气象主题
let alertTopic = "push/warnDemon";

let options = {
  clientId: "dronelocation-xzw" + Math.random(), //clientId 加随机数可解决诡异重连
  username: "admin", // 用户名
  password: "admin123", // 密码
};
// mqtt 连接地址
// let mqttUrl = import.meta.env.VITE_BASE_MQTTURL;
// let mqttUrl = "wws://211.90.240.122:8083/mqtt"; // 正式环境
let mqttUrl = "ws://211.90.240.122:8083/mqtt"; // 开发环境
// console.log("mqtt订阅主题", mqttUrl)
/**
 * @链接mqtt
 */
const mqttMsg = () => {
  if (!client) {
    client = mqtt.connect(mqttUrl, options);
  }
  // mqtt连接
  client.on("connect", (e) => {
    client.subscribe(aircraftTopic, { qos: 1 }, (error) => {
      if (!error) {
        // 消息订阅成功
        console.log("topic订阅成功", aircraftTopic);
      } else {
        // 消息订阅失败
      }
    });
    client.subscribe(langFlagTopic, { qos: 2 }, (error) => {
      if (!error) {
        // 消息订阅成功
        console.log("topic订阅成功", langFlagTopic);
      } else {
        // 消息订阅失败
      }
    });
    client.subscribe(weatherTopic, { qos: 2 }, (error) => {
      if (!error) {
        // 消息订阅成功
        console.log("topic订阅成功", weatherTopic);
      } else {
        // 消息订阅失败
      }
    });
    client.subscribe(alertTopic, { qos: 2 }, (error) => {
      if (!error) {
        // 消息订阅成功
        console.log("topic订阅成功", alertTopic);
      } else {
        // 消息订阅失败
      }
    });
  });

  // 接收消息处理
  client.on("message", (topic, msg) => {
    // 根据主题类型判断执行哪种处理数据方法
    if (topic === langFlagTopic && !isShowDemo.value) {
      let mqMsg = JSON.parse(msg.toString());
      updateData(mqMsg);
    } else if (topic === weatherTopic && !isShowDemo.value) {
      let mqMsg = JSON.parse(msg.toString());
      updateWeatherTopic(mqMsg);
    } else if (topic === alertTopic) {
      let mqMsg = msg.toString();
      alertData(mqMsg);
    } else if (topic === aircraftTopic && !isShowDemo.value) {
      let mqMsg = JSON.parse(msg.toString());
      aircraftData(mqMsg);
    }
  });

  // 断开发起重连
  client.on("reconnect", (error) => {
    // error
  });
  // 链接异常处理
  client.on("error", (error) => {
    //  error
  });
};

/**
 * @飞行器主题数据处理
 */
const aircraftData = (mqMsg) => {
  const { landFlag, type, droneUK } = mqMsg;
  // if (landFlag === 2) console.log(type, droneUK);
  // 飞行
  if (landFlag === 1) {
    switch (type) {
      // 品牌无人机
      case 1:
      case 2:
      case 3:
      case 4:
      case 5:
      case 6:
        if (mqMsg.droneUK === WRJdoneUK) {
          setTimeout(() => {
            montageUAVLine(mqMsg);
          }, 10000)
        }
        var { data } = mqttStore.addPPDrone(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 民航飞行器
      case 7:
        var { data } = mqttStore.addMHPlane(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(
            position,
            data.icon,
            data,
            "plane",
            0.035,
            0.035
          );
        }
        if (mqMsg.droneUK === MHdoneUK) {
          setTimeout(() => {
            montageMHLine(mqMsg);
          }, MHTimer)
        }
        break;
      // 通航飞行器
      case 8:
        var { data } = mqttStore.addPlane(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 自制无人机
      case 20:
        var { data } = mqttStore.addZZDrone(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 私人飞机
      case 21:
        var { data } = mqttStore.addPersonalPlane(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 微型飞机
      case 22:
        var { data } = mqttStore.addMiniPlane(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 直升机
      case 23:
        var { data } = mqttStore.addHelicopter(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 旋翼机
      case 24:
        var { data } = mqttStore.addRotorcraft(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 滑翔机
      case 25:
        var { data } = mqttStore.addGlider(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 航模
      case 26:
        var { data } = mqttStore.addGlider(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 飞艇
      case 27:
        var { data } = mqttStore.addGlider(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 热气球
      case 28:
        var { data } = mqttStore.addGlider(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 氢气球
      case 29:
        var { data } = mqttStore.addGlider(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
      // 动力伞
      case 30:
        var { data } = mqttStore.addGlider(mqMsg);
        if (data) {
          let position = [data.longitude, data.latitude, data.height];
          GTitleset.iconSprite(position, data.icon, data, "aircraft");
        }
        mqttStore.alarmEvents(mqMsg);
        break;
    }
  }
};

/**
 * @数据更新主题处理
 */
const updateData = (mqMsg) => {
  const { landFlag, type, droneUK } = mqMsg;
  // 降落
  if (landFlag === 2) {
    // console.log(type, droneUK);
    let data;
    switch (type) {
      // 品牌无人机
      case 1:
      case 2:
      case 3:
      case 4:
      case 5:
      case 6:
        data = mqttStore.removePPDrone(mqMsg);
        break;
      // 民航飞行器
      case 7:
        // console.log(">>>>>>>>>>>>>>民航<<<<<<<<<<<<<<<<", droneUK);
        data = mqttStore.removeMHPlane(mqMsg);
        break;
      // 通航飞行器
      case 8:
        data = mqttStore.removePlane(mqMsg);
        break;
      // 自制无人机
      case 20:
        data = mqttStore.removeZZDrone(mqMsg);
        break;
      // 私人飞机
      case 21:
        data = mqttStore.removePersonalPlane(mqMsg);
        break;
      // 微型飞机
      case 22:
        data = mqttStore.removeMiniPlane(mqMsg);
        break;
      // 直升机
      case 23:
        data = mqttStore.removeHelicopter(mqMsg);
        break;
      // 旋翼机
      case 24:
        data = mqttStore.removeRotorcraft(mqMsg);
        break;
      // 滑翔机
      case 25:
        data = mqttStore.removeGlider(mqMsg);
        break;
      // 航模
      case 26:
        data = mqttStore.removeGlider(mqMsg);
        break;
      // 飞艇
      case 27:
        data = mqttStore.removeGlider(mqMsg);
        break;
      // 热气球
      case 28:
        data = mqttStore.removeGlider(mqMsg);
        break;
      // 氢气球
      case 29:
        data = mqttStore.removeGlider(mqMsg);
        break;
      // 动力伞
      case 30:
        data = mqttStore.removeGlider(mqMsg);
        break;
    }
    if (data) {
      GTitleset.removeIconSprite(data.droneUK);
      GTitleset.removetextSprite(data.droneUK);
    }
  }
};

/**
 * @小气象数据更新主题处理
 */
const updateWeatherTopic = (mqMsg) => {
  let list = [];
  list.push(mqMsg);
  GController.deviceMeteorological(list, "FL");
};

/**
 * @预警事件数据更新主题处理
 */
const alertData = (mqMsg) => {
  if (mqMsg === "guanbi") {
    handleCheckAllChange([]);
  } else {
    handleCheckAllChange([mqMsg]);
  }
};

/**
 * @断开链接mqtt
 */
const stopConnect = () => {
  if (client) client.end();
  console.log("断开链接");
};

// ----------------------------------------------   点击地图图标事件    ----------------------------------------------------

/**
 * @地图鼠标拖拽移动事件
 * */
function changeDefaultView() {
  childComponentRef.value.defaultMouse();
}

/**
 * @地图鼠标缩放事件
 * */
function suoFangDefaultView() {
  childComponentRef.value.defaultZoomEnd();
}

/**
 * @根据点击元素不同打开不同弹窗
 * @params val id值
 * @params type 区分航线 设备 ...等
 * */
function openPop(val, type) {
  console.log(val, type)
  // changeIsShowDetail()
  switch (type) {
    case "device":
      popDevice(val, type);
      break;
    case "airline":
      popAirline(val, type);
      break;
    case "company":
      popCompany(val, type);
      break;
    case "airport":
    case "otherAirport":
      popAirport(val, type);
      break;
    case "plane":
      popPlane(val, type);
      break;
    case "airspace":
      popAirspace(val, type);
      break;
    case "aircraft":
      window.tabsType = false;
      popAircraft(val);
      break;
    case "firstLevel":
      handleCheckAllChange([]);
      handleCheckAllChange(val);
      duofaTimeOut = setTimeout(addDuofaIcon, 30000);
      break;
    case "secondLevel":
      handleCheckAllChange([]);
      handleCheckAllChange(val);
      duofaTimeOut = setTimeout(addDuofaIcon, 10000);
      break;
    case "thirdLevel":
      handleCheckAllChange([]);
      handleCheckAllChange(val);
      duofaTimeOut = setTimeout(addDuofaIcon, 10000);
      break;
  }
}

/**
 * @打开设备弹窗
 * */
async function popDevice(val, type) {
  // 关闭tabs弹窗
  if (flyTaskStore.TabsVisible) tabs.value.tabsVisibleClose();
  if (dialogVisible.value) visibleClose();
  // dialogVisible.value = false;
  routeVisibleClose();
  typeCard.value = type;
  const { data } = await getDeviceDetail(val);
  title.value = "设备信息";
  content.value = data;
  GController.flyToTarget([content.value.longitude, content.value.latitude]);
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开航线弹窗
 * */
async function popAirline(val, type) {
  if (routeInforVisible.value) routeInforVisible.value = false;
  // 关闭tabs弹窗
  if (flyTaskStore.TabsVisible) tabs.value.tabsVisibleClose();
  if (dialogVisible.value) visibleClose();
  routeVisibleClose();
  typeCard.value = type;
  const { rows } = await getAirApplyListApi({}, { airspaceApplyId: val });
  content.value = airlineFormat(rows[0], "airline");
  aMap.setZoomAndCenter(13, [
    content.value.centerPoint[0],
    content.value.centerPoint[1],
  ]);
  title.value = "航线信息";
  dialogVisible.value = true;

  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开企业弹窗
 * */
function popCompany(val, type) {
  // 关闭tabs弹窗
  if (flyTaskStore.TabsVisible) tabs.value.tabsVisibleClose();
  if (dialogVisible.value) visibleClose();
  routeVisibleClose();
  typeCard.value = type;
  content.value = cockpitStore.getCompanyDetail(val);
  GController.flyToTarget([content.value.longitude, content.value.latitude]);
  title.value = "企业信息";
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开机场天气弹窗
 * */
async function popAirport(val, type) {
  // 关闭tabs弹窗
  if (flyTaskStore.TabsVisible) tabs.value.tabsVisibleClose();
  if (dialogVisible.value) visibleClose();
  routeVisibleClose();
  typeCard.value = type;
  const { data } = await getAirportWeather(val);
  let obj = {
    ...data,
    label: val,
  };
  content.value = obj;
  title.value = `${val}天气信息`;
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开民航
 * */

let MHdoneUK = ""; // 存储民航的doneUK
async function popPlane(val, type) {
  MHdoneUK = val;
  // 关闭tabs弹窗
  if (flyTaskStore.TabsVisible) tabs.value.tabsVisibleClose();
  if (dialogVisible.value) visibleClose();
  routeVisibleClose();
  typeCard.value = type;
  content.value = mqttStore.getDetailByDroneUk(val);
  isShowDetail.value = true;
  title.value = "航班号";
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开飞行器弹窗
 * */
function popAircraft(id) {
  // 关闭普通弹窗
  if (flyTaskStore.TabsVisible) {
    tabs.value.tabsVisibleClose();
    // isShowDetail.value = false;
  }
  if (dialogVisible.value) visibleClose();
  // tabs.value.tabsVisibleClose(); // ---------就是他
  const { aircraftId, droneUK } = mqttStore.getAircraftSn(id);
  // dialogVisible.value = false;
  routeVisibleClose();
  isShowDetail.value = true;
  flyTaskStore.openTabs("first", aircraftId, null, null, droneUK);
  setTimeout(() => {
    let box = document.getElementById("tabCard");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开空域弹窗
 * */
async function popAirspace(val, type) {
  // 关闭tabs弹窗
  if (flyTaskStore.TabsVisible) tabs.value.tabsVisibleClose();
  if (dialogVisible.value) visibleClose();
  routeVisibleClose();
  typeCard.value = type;
  const { data } = await getDetailInfo(val);
  if (data.circle == 0) {
    aMap.setZoomAndCenter(12, [data.gps.longitude, data.gps.latitude]);
  } else {
    aMap.setZoomAndCenter(12, [
      data.pointLocation.split(",")[0],
      data.pointLocation.split(",")[1],
    ]);
  }
  data.dateRange =
    data.endTime === "2999-12-12 23:59:59"
      ? "永久有效"
      : `${data.startTime} ~ ${data.endTime}`;

  title.value = "空域信息";
  content.value = data;
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    // let leftOffset = entityPosition.x - box.clientWidth - 50;
    // let topOffset = entityPosition.y - box.clientHeight / 2;
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

// ----------------------------------------------   空域切换    ------------------------------------------------------------

// 当前选中飞行计划空域存储标识
const curAirspace = ref();
/**
 * @description: 几何体坐标数据处理
 */
const handling = (pointLocation) => {
  // 处理每个坐标字符串
  var trimmedString = pointLocation.replace(/\[/g, "").replace(/\]/g, "");
  // 分割成坐标字符串数组
  var coordinateStrings = trimmedString.split(",");
  // 处理每个坐标字符串
  var coordinates = [];
  for (var i = 0; i < coordinateStrings.length; i += 2) {
    var longitude = parseFloat(coordinateStrings[i]);
    var latitude = parseFloat(coordinateStrings[i + 1]);
    coordinates.push([longitude, latitude]);
  }
  return coordinates;
};

let kongyuObj = {};
/**
 * @显示空域信息
 * */
async function addAirspace(id) {
  kongyuObj[id] = [];
  const { data } = await getAirTypeIds(id);
  if (data.length > 0) {
    data.map((item) => {
      //萧山禁飞区写死红色
      if (item.airspaceId == "d823f5326f65d612dd138e602b37e6f1") {
        item.lineColor = "#e44032";
      }
      kongyuObj[id].push(item.airspaceId);
      item.EntityType = "airspace";
      if (item.circle == 1) {
        let positions = item.pointLocation.split(",").map(Number);
        GTitleset.CysGeometry(
          positions,
          item.radius,
          item.topHeight,
          item.fullColor,
          item
        );
      } else {
        // 多边形
        let coordinates = handling(item.pointLocation);
        coordinates.push(coordinates[0]);
        let position = [item.gps.longitude, item.gps.latitude, 1000];
        GTitleset.iconSprite(
          position,
          "nofly.png",
          item,
          "kongyu",
          0.025,
          0.03
        );
        GTitleset.polygonGeometry(coordinates, 0, item.lineColor, item);
      }
    });
  }
}

/**
 * @隐藏空域信息
 * */
function hideAirspace(id) {
  GTitleset.removeCysGeometry(id);
  if (kongyuObj[id]) {
    kongyuObj[id].forEach((item) => {
      GTitleset.removeIconSprite(item);
      // GTitleset.removetextSprite(item);
    });
  }
  GTitleset.removewall();
}

/**
 * @显示当前选中飞行计划的空域
 * */
function addCurAirspace(data) {
  // console.log("data", data);
  GController.flyToTarget([...data.centerPoint], data.zoom);
  let positions = data.pointLocation.split(",").map(Number);
  GTitleset.CysGeometry(
    positions,
    data.radius,
    data.topHeight,
    data.fullColor,
    data
  );
  curAirspace.value = data.airTypeId;
}

/**
 * @移除当前空域
 * */
function removeCurAirspace() {
  if (!curAirspace.value) return;
  GTitleset.removeCysGeometry(curAirspace.value);
  curAirspace.value = null;
}
// ----------------------------------------------  切换地图底图样式  ------------------------------------------------------------

window.mapType = "SW";

/**
 * @切换卫星地图
 * */
function chooseWXMap() {
  window.mapType = "WX";
  // isShowDetail.value = true;
  GController.swicthSatellite();
  GTitleset.closeModel("WX");
}

/**
 * @移除卫星地图
 * */
function removeWXMap() {}

/**
 * @切换三维地图
 * */
function chooseTMap() {
  window.mapType = "SW";
  // isShowDetail.value = false;
  GController.showVectorMap();
  GTitleset.showModel("SW");
}

/**
 * @移除矢量地图
 * */
function removeTMap() {}

/**
 * @切换矢量地图
 * */
function chooseVectorMap() {
  window.mapType = "SL";
  // isShowDetail.value = true;
  GController.show3DMap();
  GTitleset.closeModel("SL");
}

// ----------------------------------------------  飞行器显示与隐藏  ------------------------------------------------------------

/**
 * @显示无人机
 */
function addDrone(type) {
  const droneList = mqttStore.controlShowDrone(type, true);
  droneList.forEach((item) => {
    let position = [item.longitude, item.latitude, item.height];
    GTitleset.iconSprite(position, item.icon, item, "aircraft");
  });
}

/**
 * @隐藏无人机
 */
function removeDrone(type) {
  const droneList = mqttStore.controlShowDrone(type, false);
  droneList.forEach((item) => {
    GTitleset.removeIconSprite(item.droneUK);
  });
}

/**
 * @显示通航飞行器
 */
function addPlane(type) {
  const planeList = mqttStore.controlShowPlane(type, true);
  planeList.forEach((item) => {
    let position = [item.longitude, item.latitude, item.height];
    GTitleset.iconSprite(position, item.icon, item, "aircraft");
  });
}

/**
 * @隐藏通航飞行器
 */
function removePlane(type) {
  const planeList = mqttStore.controlShowPlane(type, false);
  //地图上去掉通航飞行器图标
  planeList.forEach((item) => {
    GTitleset.removeIconSprite(item.droneUK);
  });
}

/**
 * @显示民航飞行器
 */
function addMHPlane() {
  const minhangList = mqttStore.controlShowMHPlane(true);
  minhangList.forEach((item) => {
    let position = [item.longitude, item.latitude, item.height];
    GTitleset.iconSprite(position, item.icon, item, "plane", 0.035, 0.035);
  });
}

/**
 * @隐藏民航飞行器
 */
function removeMHPlane() {
  const minhangList = mqttStore.controlShowMHPlane(false);
  minhangList.forEach((item) => {
    GTitleset.removetextSprite(item.droneUK);
    GTitleset.removeIconSprite(item.droneUK);
  });
}

/**
 * @高度搜索
 */
function heightSearch(low, top, isShow = false) {
  mqttStore.controlShowDrone("all", isShow);
  mqttStore.controlShowPlane("all", isShow);
  mqttStore.controlShowMHPlane(isShow);
  const { removeList, showList } = mqttStore.searchHeight(low, top);
  removeList.forEach((item) => {
    GTitleset.removeIconSprite(item.droneUK);
    GTitleset.removetextSprite(item.droneUK);
  });
  showList.forEach((item) => {
    let position = [item.longitude, item.latitude, item.height];
    GTitleset.iconSprite(position, item.icon, item, item.EntityType);
  });
}

// ----------------------------------------------  气象  ------------------------------------------------------------

// 风场实例与定时器
let timer = null;
let windy = null;

/**
 * @开启风场
 * */
const createWindy = () => {
  compassShow.value = true;
  windList.value = viewer.value.windyDraw(weatherList);
};

/**
 * @关闭风场
 * */
const closeWindy = () => {
  compassShow.value = false;
  // viewer.value.viewer.scene.primitives.remove(windy.lines);
  // clearInterval(timer);
  viewer.value.closeWindDraw(windList.value);
  windList.value = [];
};

// 风力图标
let windList = ref([]);
// 温度图标
let tempList = ref([]);
// 降水图标
let rainList = ref([]);
// 风力图标
let windPowerList = ref([]);
// 风速图标
let windSpeedList = ref([]);
// 设备气象
let deviceWeatherList = ref([]);
/**
 * @温度
 * */
const heatMap = () => {
  isShowDetail.value = true;
  tempList.value = GController.drawTemp(weatherList);
  deviceMeteorological("WD");
  GController.flyToTarget([120.155125, 30.264725], 11);
};

/**
 * @降水
 * */
const precipitation = () => {
  isShowDetail.value = true;
  rainList.value = GController.drawRain(weatherList);
  deviceMeteorological("JS");
  GController.flyToTarget([120.155125, 30.264725], 11);
};

/**
 * @风力
 * */
const windPowerShow = () => {
  isShowDetail.value = true;
  windList.value = GController.drawWind(weatherList);
  deviceMeteorological("FL");
  GController.flyToTarget([120.155125, 30.264725], 11);
};

/**
 * @设备气象
 * */
const deviceMeteorological = (type) => {
  getDeviceWeather().then((res) => {
    if (res.code === 200) {
      deviceWeatherList = res.data;
      let list = GController.deviceMeteorological(deviceWeatherList, type);
      switch (type) {
        case "WD":
          tempList.value = [...tempList.value, ...list];
          break;
        case "JS":
          rainList.value = [...rainList.value, ...list];
          break;
        case "FL":
          windList.value = [...windList.value, ...list];
          break;
      }
    }
  });
};

/**
 * @关闭气象
 * */
const closeWeather = (type) => {
  isShowDetail.value = false;
  GController.defaultAngle(defaultViewShow);
  switch (type) {
    case "temp":
      GController.removeWeather(tempList.value);
      tempList.value = [];
      break;
    case "wind":
      GController.removeWeather(windList.value);
      windList.value = [];
      break;
    case "rain":
      GController.removeWeather(rainList.value);
      rainList.value = [];
      break;
  }
};

// ----------------------------------------------     企业机场数据  -------------------------------------------------------------------
/**
 * @添加企业Marker
 * */
function addCompany() {
  let companyList = cockpitStore.companyList;
  GController.drawMassPoint(companyList, "company");
}

/**
 * @移除企业Marker
 * */
function removeCompany() {
  GController.removeMassPoint("company");
}

/**
 * @添加民航机场Marker
 * */
function addMHAirport() {
  let airportList = cockpitStore.mhAirportList;
  GController.drawMassPoint(airportList, "mhAirport");
}

/**
 * @移除民航机场Marker
 * */
function removeMHAirport() {
  GController.removeMassPoint("mhAirport");
}

/**
 * @添加通航机场Marker
 * */
function addTHAirport() {
  let airportList = cockpitStore.thAirportList;
  GController.drawMassPoint(airportList, "thAirport");
}

/**
 * @移除通航机场Marker
 * */
function removeTHAirport() {
  GController.removeMassPoint("thAirport");
}

/**
 * @添加垂直机场Marker
 * */
function addCZAirport() {
  let airportList = cockpitStore.czAirportList;
  GController.drawMassPoint(airportList, "czAirport");
}

/**
 * @移除垂直机场Marker
 * */
function removeCZAirport() {
  GController.removeMassPoint("czAirport");
}

/**
 * @添加无人机机场Marker
 * */
function addWRJAirport() {
  let airportList = cockpitStore.wrjAirportList;
  GController.drawMassPoint(airportList, "UAVAirport");
}

/**
 * @移除无人机机场Marker
 * */
function removeWRJAirport() {
  GController.removeMassPoint("UAVAirport");
}

// ----------------------------------------------     航线数据数据 ---------------------------------------------------------------

// 通航航线
let planeLineList = {
  srfjHX: [],
  wxfjHX: [],
  zsjHX: [],
  xyjHX: [],
  hxjHX: [],
};
// 无人机航线
let UAVLineList = {
  ppUAVHX: [],
  zzUAVHX: [],
};
// 其它航线
let otherLineList = {
  hmHX: [],
  ftHX: [],
  rqqHX: [],
  qqqHX: [],
  dlsHX: [],
};
// 实施飞行轨迹
let curLine = {};
let curIcon = {};
let interval = null;
/**
 * @添加通航航线
 * */
function addPlaneLine(type) {
  let lines;
  switch (type) {
    case "srfjHX":
      lines = cockpitStore.srPlaneLines;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        planeLineList["srfjHX"].push(line);
        planeLineList["srfjHX"].push(endPoint);
        planeLineList["srfjHX"].push(startPoint);
        planeLineList["srfjHX"].push(standbyPoint);
        planeLineList["srfjHX"].push(standbyLine);
      });
      break;
    case "wxfjHX":
      lines = cockpitStore.wxPlaneLines;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        planeLineList["wxfjHX"].push(line);
        planeLineList["wxfjHX"].push(endPoint);
        planeLineList["wxfjHX"].push(startPoint);
        planeLineList["wxfjHX"].push(standbyPoint);
        planeLineList["wxfjHX"].push(standbyLine);
      });
      break;
    case "zsjHX":
      lines = cockpitStore.zsjPlaneLines;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        planeLineList["zsjHX"].push(line);
        planeLineList["zsjHX"].push(endPoint);
        planeLineList["zsjHX"].push(startPoint);
        planeLineList["zsjHX"].push(standbyLine);
      });
      break;
    case "xyjHX":
      lines = cockpitStore.xyjPlaneLines;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        planeLineList["xyjHX"].push(line);
        planeLineList["xyjHX"].push(endPoint);
        planeLineList["xyjHX"].push(startPoint);
        planeLineList["xyjHX"].push(standbyPoint);
        planeLineList["xyjHX"].push(standbyLine);
      });
      break;
    case "hxjHX":
      lines = cockpitStore.hxjPlaneLines;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        planeLineList["hxjHX"].push(line);
        planeLineList["hxjHX"].push(endPoint);
        planeLineList["hxjHX"].push(startPoint);
        planeLineList["hxjHX"].push(standbyPoint);
        planeLineList["hxjHX"].push(standbyLine);
      });
      break;
  }
}

/**
 * @移除通航航线
 * */
function removePlaneLine(type) {
  switch (type) {
    case "srfjHX":
      GTitleset.removeLineList(planeLineList["srfjHX"]);
      planeLineList["srfjHX"] = [];
      break;
    case "wxfjHX":
      GTitleset.removeLineList(planeLineList["wxfjHX"]);
      planeLineList["wxfjHX"] = [];
      break;
    case "zsjHX":
      GTitleset.removeLineList(planeLineList["zsjHX"]);
      planeLineList["zsjHX"] = [];
      break;
    case "xyjHX":
      GTitleset.removeLineList(planeLineList["xyjHX"]);
      planeLineList["xyjHX"] = [];
      break;
    case "hxjHX":
      GTitleset.removeLineList(planeLineList["hxjHX"]);
      planeLineList["hxjHX"] = [];
      break;
  }
}

/**
 * @添加无人机航线
 * */
function addUAVLine(type) {
  let lines;
  switch (type) {
    case "ppUAVHX":
      lines = cockpitStore.ppUAVLines;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        UAVLineList["ppUAVHX"].push(line);
        UAVLineList["ppUAVHX"].push(endPoint);
        UAVLineList["ppUAVHX"].push(startPoint);
        UAVLineList["ppUAVHX"].push(standbyPoint);
        UAVLineList["ppUAVHX"].push(standbyLine);
      });
      break;
    case "zzUAVHX":
      lines = cockpitStore.zzUAVLines;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        UAVLineList["zzUAVHX"].push(line);
        UAVLineList["zzUAVHX"].push(endPoint);
        UAVLineList["zzUAVHX"].push(startPoint);
        UAVLineList["zzUAVHX"].push(standbyPoint);
        UAVLineList["zzUAVHX"].push(standbyLine);
      });
      break;
  }
}

/**
 * @移除无人机航线
 * */
function removeUAVLine(type) {
  switch (type) {
    case "ppUAVHX":
      GTitleset.removeLineList(UAVLineList["ppUAVHX"]);
      UAVLineList["ppUAVHX"] = [];
      break;
    case "zzUAVHX":
      GTitleset.removeLineList(UAVLineList["zzUAVHX"]);
      UAVLineList["zzUAVHX"] = [];
      break;
  }
}

/**
 * @添加其它航线
 * */
function addOtherLine(type) {
  let lines;
  switch (type) {
    case "hmHX":
      lines = cockpitStore.hmAirline;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        otherLineList["hmHX"].push(line);
        otherLineList["hmHX"].push(endPoint);
        otherLineList["hmHX"].push(startPoint);
        otherLineList["hmHX"].push(standbyPoint);
        otherLineList["hmHX"].push(standbyLine);
      });
      break;
    case "ftHX":
      lines = cockpitStore.ftAirline;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        otherLineList["ftHX"].push(line);
        otherLineList["ftHX"].push(endPoint);
        otherLineList["ftHX"].push(startPoint);
        otherLineList["ftHX"].push(standbyPoint);
        otherLineList["ftHX"].push(standbyLine);
      });
      break;
    case "rqqHX":
      lines = cockpitStore.rqqAirline;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        otherLineList["rqqHX"].push(line);
        otherLineList["rqqHX"].push(endPoint);
        otherLineList["rqqHX"].push(startPoint);
        otherLineList["rqqHX"].push(standbyPoint);
        otherLineList["rqqHX"].push(standbyLine);
      });
      break;
    case "qqqHX":
      lines = cockpitStore.qqqAirline;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        otherLineList["qqqHX"].push(line);
        otherLineList["qqqHX"].push(endPoint);
        otherLineList["qqqHX"].push(startPoint);
        otherLineList["qqqHX"].push(standbyPoint);
        otherLineList["qqqHX"].push(standbyLine);
      });
      break;
    case "dlsHX":
      lines = cockpitStore.dlsAirline;
      if (lines.length < 1) return;
      lines.map((item) => {
        const { line, startPoint, endPoint, standbyPoint, standbyLine } =
          GTitleset.drawLine1(item);
        otherLineList["dlsHX"].push(line);
        otherLineList["dlsHX"].push(endPoint);
        otherLineList["dlsHX"].push(startPoint);
        otherLineList["dlsHX"].push(standbyPoint);
        otherLineList["dlsHX"].push(standbyLine);
      });
      break;
  }
}

/**
 * @移除其它航线
 * */
function removeOtherLine(type) {
  switch (type) {
    case "hmHX":
      GTitleset.removeLineList(otherLineList["hmHX"]);
      otherLineList["hmHX"] = [];
      break;
    case "ftHX":
      GTitleset.removeLineList(otherLineList["ftHX"]);
      otherLineList["ftHX"] = [];
      break;
    case "rqqHX":
      GTitleset.removeLineList(otherLineList["rqqHX"]);
      otherLineList["rqqHX"] = [];
      break;
    case "qqqHX":
      GTitleset.removeLineList(otherLineList["qqqHX"]);
      otherLineList["qqqHX"] = [];
      break;
    case "dlsHX":
      GTitleset.removeLineList(otherLineList["dlsHX"]);
      otherLineList["dlsHX"] = [];
      break;
  }
}

// 无人机doneUK存储
var WRJdoneUK = "";
var lastMontagePosiotion = null;
var dataArrObj = null;
/**
 * @添加当前选中无人机航线 --- old
 * */
function addCurUAVLine(dataArr) {
  dataArr.map((item) => {
    WRJdoneUK = item.droneUK;
    curLine[item.id] = [];
    if (item.EntityType === "applyline" || item.EntityType === "airline") {
      GController.flyToTarget([...item.centerPoint], item.zoom); // 设置视角
      const { line, startPoint, endPoint, standbyPoint, standbyLine } =
        GTitleset.drawLine1(item);
      curLine[item.id].push(line);
      curLine[item.id].push(startPoint);
      curLine[item.id].push(endPoint);
      curLine[item.id].push(standbyPoint);
      curLine[item.id].push(standbyLine);
    } else if (item.EntityType === "track") {
      dataArrObj = item;
      let positionList = [0.03, 0.03];
      if (item.type === 4) {
        positionList = [0.04, 0.04]
      }
      curIcon[item.id] = GTitleset.flyicon(item.position[0], item.droneIcon, positionList);
      let position = [...item.position[0]];
      lastMontagePosiotion = item.position[item.position.length-1];
      if (dataArr.length === 1) GController.flyToTarget(position, item.zoom);
      const { flyHandPoint, flyHandLine } = GTitleset.aircraftTrack(item);
      curLine[item.id].push(flyHandPoint);
      curLine[item.id].push(flyHandLine);
      interval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(curIcon[item.id], item.color);
        if (stopInterval == "stop") {
          if (interval) {
            clearInterval(interval);
            interval = null;
          }
        }
      }, 200);
    }
  });
}

/**
 * @移除当前选中无人机航线
 * */
function removeCurUAVLine(dataArr) {
  WRJdoneUK = "";
  if (!dataArr) {
    dataArr = Object.keys(curLine);
  }
  stopIntervalMontage = null;
  if (IntervalMontage) {
    clearInterval(IntervalMontage);
    IntervalMontage = null;
  }
  if (montageList.length > 0) montageList = [];
  GTitleset.remove(montageImgIcon);
  GTitleset.clearRemovedrawlLine();
  montageIcon = "";
  montageImgIcon = "";
  dataArr.forEach((item) => {
    GTitleset.removeLineList(curLine[item]);
    curLine[item] = [];
    GTitleset.clearRemovedrawlLine();
    if (curIcon[item]) {
      GTitleset.remove(curIcon[item]);
      curIcon[item] = null;
    }
    if (interval) {
      clearInterval(interval);
      interval = null;
    }
    defaultPerspect();
  });
}

/*
* 10s后Mqtt数据推送实时绘制
* */
let montageList = [];
let montageIcon = "";
let montageImgIcon = "";
var IntervalMontage = null;
var stopIntervalMontage = null;
let iconSize = null;
/*
* 无人机动画轨迹拼接
* */
function montageUAVLine(mqMsg) {
  if (!!WRJdoneUK) {
    if (mqMsg.type === 4) {
      if (mqMsg.partnerId === 1) {
        montageIcon = "hangyeUAV2.png"
        iconSize = [0.04, 0.04];
      }else if (mqMsg.partnerId === 8) {
        montageIcon = "jnks.png"
        iconSize = [0.04, 0.04];
      }else{
        // 其他通用行业无人机
        montageIcon = "HANGYE.png"
        iconSize = [0.03, 0.03];
      }
    }else {
      // 黑飞图标
      montageIcon = "heifeiUAV.png"
      iconSize = [0.03, 0.03];
    }
    let position = [mqMsg.curLongitude, mqMsg.curLatitude, mqMsg.curHeight];
    if(montageList.length === 0) {
      montageList.push(lastMontagePosiotion)
    }else {
      if (montageList.length < 2) {
        montageList.push(position);
      }else {
        montageList.splice(0, 1);
        montageList.push(position);
      }
    }
    if (montageList.length > 1) {
      if (montageImgIcon) {
        GTitleset.remove(montageImgIcon);
      }
      GTitleset.remove(curIcon[dataArrObj.id])
      montageImgIcon = GTitleset.flyicon(montageList[0], montageIcon, iconSize);
      var Conflictline1 = GTitleset.curvetrajectory(montageList);
      stopIntervalMontage = GTitleset.moveOnCurve(montageImgIcon);
      if (stopIntervalMontage == "stop") {
        // 清除定时器
        // if (IntervalMontage) {
        //   clearInterval(IntervalMontage);
        // }
      }
    }
  }
}

/*
* 民航动画轨迹拼接
* */

let minhangIcon = null;
let minhangTitle = null;
let minhangTrackTimer = null;
let lastPositionPoint = [];
let montageMHList = [];
let MHTimer = 0;
/**
 * @添加当前选中民航航线
 * */
function curPlaneLine(data) {
  MHTimer = data.position.length * 200;
  lastPositionPoint = data.position[data.position.length-1];
  GController.flyToTarget(data.position[0], 10);
  let len = data.position.length;
  let i = 1;
  if (len === 1) {
    GTitleset.iconSprite(
        data.position[0],
        "minghang1.png",
        {
          type: 7
        },
        "ICON",
        0.035,
        0.035
    );
    return
  }
  function loop() {
    if (i <= len - 1) {
      if (minhangIcon) {
        GTitleset.remove(minhangIcon);
        GTitleset.remove(minhangTitle);
      }
      let directionAngle = calculateBearing(
        data.position[i - 1][0],
        data.position[i - 1][1],
        data.position[i][0],
        data.position[i][1]
      );
      GTitleset.trajectory([data.position[i - 1], data.position[i]]);
      minhangIcon = GTitleset.iconSprite(
        data.position[i],
        "minghang1.png",
        {
          type: 7,
          directionAngle,
        },
        "ICON",
        0.035,
        0.035
      );
      minhangTitle = GTitleset.createTag(data.position[i], data.droneSerialId);
      i++;
    } else {
      clearTimeout(minhangTrackTimer);
    }
  }

  loop();
  minhangTrackTimer = setInterval(loop, 200);
}

/*
* 民航动画轨迹拼接
* */
let minhangPJIcon = null;
let minhangPJTitle = null;

function montageMHLine(mqMsg) {
  if (!!MHdoneUK) {
    let position = [mqMsg.curLongitude , mqMsg.curLatitude, mqMsg.curHeight];
    if(montageMHList.length === 0) {
      montageMHList.push(lastPositionPoint)
    }else {
      if (montageMHList.length < 2) {
        montageMHList.push(position);
      }else {
        montageMHList.splice(0, 1);
        montageMHList.push(position);
      }
    }
    if (montageMHList.length > 1) {
      if (minhangIcon) {
        GTitleset.remove(minhangIcon);
        GTitleset.remove(minhangTitle);
      }
      if (minhangPJIcon) {
        GTitleset.remove(minhangPJIcon);
        GTitleset.remove(minhangPJTitle);
      }
      let directionAngle = calculateBearing(
          montageMHList[0][0],
          montageMHList[0][1],
          montageMHList[1][0],
          montageMHList[1][1]
      );
      GTitleset.trajectory([montageMHList[0], montageMHList[1]]);
      minhangPJIcon = GTitleset.iconSprite(
          montageMHList[1],
          "minghang1.png",
          {
            type: 7,
            directionAngle,
          },
          "ICON",
          0.035,
          0.035
      );
      minhangPJTitle = GTitleset.createTag(montageMHList[1], mqMsg.droneSerialId);
    }
  }
}

/*
* 计算民航飞机方向角
* */
function calculateBearing(lon1, lat1, lon2, lat2) {
  const lat1Rad = (lat1 * Math.PI) / 180;
  const lat2Rad = (lat2 * Math.PI) / 180;
  const dLon = ((lon2 - lon1) * Math.PI) / 180;

  const y = Math.sin(dLon) * Math.cos(lat2Rad);
  const x =
    Math.cos(lat1Rad) * Math.sin(lat2Rad) -
    Math.sin(lat1Rad) * Math.cos(lat2Rad) * Math.cos(dLon);

  let bearing = (Math.atan2(y, x) * 180) / Math.PI;
  bearing = (bearing + 360) % 360;

  return bearing;
}

/**
 * @移除当前选中民航航线
 * */
function removeCurPlaneLine() {
  MHdoneUK = "";
  MHTimer = 0;
  montageMHList = [];
  lastPositionPoint = [];
  GTitleset.clearRemovedrawlLine();
  clearTimeout(minhangTrackTimer);
  GTitleset.remove(minhangIcon);
  GTitleset.remove(minhangTitle);
  GTitleset.remove(minhangPJIcon);
  GTitleset.remove(minhangPJTitle);
  minhangIcon = null;
  minhangTitle = null;
  minhangPJIcon = null;
  minhangPJTitle = null;
  minhangTrackTimer = null;
}

// ----------------------------------------------     设备数据  ---------------------------------------------------------------
/**
 * @添加无人机探测设备Marker
 * */
function addDetectDevice() {
  let detectDeviceList = cockpitStore.zhenceList;
  GController.drawMassPoint(detectDeviceList, "zhence");
}

/**
 * @移除无人机探测设备Marker
 * */
function removeDetectDevice() {
  GController.removeMassPoint("zhence");
}

/**
 * @添加无线电压制设备Marker
 * */
function addCounterDevice() {
  let counterDeviceList = cockpitStore.fanzhiList;
  GController.drawMassPoint(counterDeviceList, "fanzhi");
}

/**
 * @移除无线电压制设备Marker
 * */
function removeCounterDevice() {
  GController.removeMassPoint("fanzhi");
}

/**
 * @添加无线电探测设备Marker
 * */
function addRadioDevice() {
  let radioDeviceList = cockpitStore.wuxiandianList;
  GController.drawMassPoint(radioDeviceList, "wxd");
}

/**
 * @移除无线电探测设备Marker
 * */
function removeRadioDevice() {
  GController.removeMassPoint("wxd");
}

/**
 * @添加气象设备Marker
 * */
function addWeatherDevice() {
  let weatherDeviceList = cockpitStore.weatherDeviceList;
  GController.drawMassPoint(weatherDeviceList, "qixiang");
}

/**
 * @移除气象设备Marker
 * */
function removeWeatherDevice() {
  GController.removeMassPoint("qixiang");
}

/**
 * @添加导航诱骗设备Marker
 * */
function addYouPianDevice() {
  let youpianDeviceList = cockpitStore.youpianList;
  GController.drawMassPoint(youpianDeviceList, "youpian");
}

/**
 * @移除导航诱骗设备Marker
 * */
function removeYouPianDevice() {
  GController.removeMassPoint("youpian");
}

/**
 * @阿里云-天气预报
 * */
var weatherList = [];

const weather = async () => {
  // console.log("----------------------------进来了--------------------------");
  let list = [
    "284869",
    "284872",
    "284873",
    "284874",
    "1186",
    "1187",
    "1189",
    "1190",
    "287062",
    "287063",
  ]; // 对应cesium里边的城区顺序
  await getTemperature(list).then((res) => {
    if (res.length > 0) {
      res.map((item) => {
        let lon = null;
        let lat = null;
        if (item.data.city.name === "杭州市") {
          lon = 120.1650798;
          lat = 30.25258003;
        } else if (item.data.city.name === "上城区") {
          lon = 120.169329;
          lat = 30.242312;
        } else if (item.data.city.name === "拱墅区") {
          lon = 120.141391;
          lat = 30.319424;
        } else if (item.data.city.name === "杭州市西湖区") {
          lon = 120.13006;
          lat = 30.259543;
        } else if (item.data.city.name === "滨江区") {
          lon = 120.211816;
          lat = 30.20856;
        } else if (item.data.city.name === "萧山区") {
          lon = 120.2597929;
          lat = 30.15987182;
        } else if (item.data.city.name === "余杭区") {
          lon = 119.9491413909614;
          lat = 30.315641924593855;
        } else if (item.data.city.name === "富阳区") {
          lon = 119.9460172;
          lat = 30.05939327;
        } else if (item.data.city.name === "临安区") {
          lon = 119.7153043;
          lat = 30.22959808;
        } else if (item.data.city.name === "临平区") {
          lon = 120.299094;
          lat = 30.419183;
        } else if (item.data.city.name === "钱塘区") {
          lon = 120.497834;
          lat = 30.299469;
        }
        let icon = null;
        if (
          item.data.condition.condition === "晴" ||
          item.data.condition.condition === "大部晴朗"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W0.png";
        } else if (
          item.data.condition.condition === "多云" ||
          item.data.condition.condition === "少云"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W1.png";
        } else if (item.data.condition.condition === "阴") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W2.png";
        } else if (
          item.data.condition.condition === "阵雨" ||
          item.data.condition.condition === "局部阵雨" ||
          item.data.condition.condition === "小阵雨" ||
          item.data.condition.condition === "强阵雨"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W3.png";
        } else if (
          item.data.condition.condition === "阵雪" ||
          item.data.condition.condition === "小阵雪"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W13.png";
        } else if (
          item.data.condition.condition === "雾" ||
          item.data.condition.condition === "冻雾"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W18.png";
        } else if (
          item.data.condition.condition === "沙尘暴" ||
          item.data.condition.condition === "强沙尘暴"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W20.png";
        } else if (
          item.data.condition.condition === "浮尘" ||
          item.data.condition.condition === "尘卷风" ||
          item.data.condition.condition === "扬沙"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W29.png";
        } else if (item.data.condition.condition === "霾") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W45.png";
        } else if (
          item.data.condition.condition === "雷阵雨" ||
          item.data.condition.condition === "雷电" ||
          item.data.condition.condition === "雷暴"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W4.png";
        } else if (
          item.data.condition.condition === "雷阵雨伴有冰雹" ||
          item.data.condition.condition === "冰雹" ||
          item.data.condition.condition === "冰针" ||
          item.data.condition.condition === "冰粒"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W5.png";
        } else if (item.data.condition.condition === "雨夹雪") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W6.png";
        } else if (item.data.condition.condition === "小雨") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W7.png";
        } else if (item.data.condition.condition === "中雨") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W8.png";
        } else if (item.data.condition.condition === "大雨") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W9.png";
        } else if (
          item.data.condition.condition === "暴雨" ||
          item.data.condition.condition === "大暴雨" ||
          item.data.condition.condition === "特大暴雨"
        ) {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W10.png";
        } else if (item.data.condition.condition === "小雪") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W14.png";
        } else if (item.data.condition.condition === "中雪") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W15.png";
        } else if (item.data.condition.condition === "大雪") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W16.png";
        } else if (item.data.condition.condition === "暴雪") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W17.png";
        } else if (item.data.condition.condition === "冻雨") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W19.png";
        } else if (item.data.condition.condition === "雪") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W15.png";
        } else if (item.data.condition.condition === "雨") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W8.png";
        } else if (item.data.condition.condition === "小到中雨") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W7.png";
        } else if (item.data.condition.condition === "中到大雨") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W9.png";
        } else if (item.data.condition.condition === "大到暴雨") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W10.png";
        } else if (item.data.condition.condition === "小到中雪") {
          icon = import.meta.env.VITE_BASE_PUBLICPATH + "/img/weather/W15.png";
        }
        let windLevel = item.data.condition.windLevel.toString() + ".0";
        let obj = {
          id: item.data.city.name,
          label: item.data.city.name,
          lon: lon,
          lat: lat,
          icon: icon,
          windDegrees: item.data.condition.windDegrees, // 风向角度
          windDir: item.data.condition.windDir, // 风向
          windLevel: windLevel, // 风力等级
          windSpeed: item.data.condition.windSpeed, // 风速
          temp: parseInt(item.data.condition.temp),
          condition: item.data.condition.condition,
        };
        weatherList.push(obj);
      });
    }
  });
};

// ----------------------------------------------     路网的显示与隐藏    ----------------------------------------------------

/**
 * @显示路网
 * */
function showRoad() {
  viewer.value.dataRoadShow();
}

/**
 * @隐藏路网
 * */
function hideRoad() {
  viewer.value.delete3D();
}

// ----------------------------------------------     页面相关  --------------------------------------------------------------

/**
 * @隐藏所有
 * */

function removeAll() {}

/**
 * @跳转至双屏
 * */
const changeDub = () => {
  const url = router.resolve({
    name: "dubAirMonitor",
  });

  window.open(url.href, "_blank");
};

/**
 * @返回系统首页
 * */
const backToHome = () => {
  router.push({
    name: "Index",
  });
};

/**
 * @底部菜单显示与隐藏
 * */
const footerHide = () => {
  footerIsShow.value = !footerIsShow.value;
};

// ----------------------------------------------     浏览器相关   -------------------------------------------------------------------

/**
 * @帮助
 * */
function requestHelp() {
  isHelpCard.value = !isHelpCard.value;
}

/**
 * @设置全屏
 * */
function requestFullScreen() {
  // 是否全屏，否为null
  let full = document.fullscreenElement;
  if (!full) {
    fullTitle.value = "全屏退出";
    // document自带的全屏方法
    document.documentElement.requestFullscreen();
    isFull.value = true;
  } else {
    fullTitle.value = "全屏显示";
    // document自带的退出全屏方法
    document.exitFullscreen();
    isFull.value = false;
  }
}

/**
 * @监听单屏大小
 * */
function windowResize() {
  // this.isSmallScreen = window.innerWidth < 600;
  isSmall.value = window.innerWidth < 1540;
  //
  GTitleset.handleResize(
    window.innerWidth,
    window.innerHeight,
    window.devicePixelRatio
  );
}

// ----------------------------------------------     定时更新数据   ----------------------------------------------------------

let updateInterval = setInterval(() => {
  // 今日侦测架次统计
  cockpitStore.getDetectData();
  // 今日报警数量
  cockpitStore.getTodayAlarmNum();
}, 60000);

let getAllDrone = async () => {
  const data = await getCurAirplane();
  if (data.length > 0) {
    data.forEach((item) => {
      aircraftData(item);
    });
  }
};
// ----------------------------------------------     provide   ----------------------------------------------------------

provide("addCompany", addCompany);
provide("removeCompany", removeCompany);
provide("addMHAirport", addMHAirport);
provide("removeMHAirport", removeMHAirport);
provide("addTHAirport", addTHAirport);
provide("removeTHAirport", removeTHAirport);
provide("addCZAirport", addCZAirport);
provide("removeCZAirport", removeCZAirport);
provide("addWRJAirport", addWRJAirport);
provide("removeWRJAirport", removeWRJAirport);
provide("addPlaneLine", addPlaneLine);
provide("removePlaneLine", removePlaneLine);
provide("addUAVLine", addUAVLine);
provide("removeUAVLine", removeUAVLine);
provide("addOtherLine", addOtherLine);
provide("removeOtherLine", removeOtherLine);
provide("chooseWXMap", chooseWXMap);
provide("removeWXMap", removeWXMap);
provide("chooseVectorMap", chooseVectorMap);
provide("chooseTMap", chooseTMap);
provide("removeTMap", removeTMap);
provide("addDetectDevice", addDetectDevice);
provide("removeDetectDevice", removeDetectDevice);
provide("addCounterDevice", addCounterDevice);
provide("removeCounterDevice", removeCounterDevice);
provide("addRadioDevice", addRadioDevice);
provide("removeRadioDevice", removeRadioDevice);
provide("addWeatherDevice", addWeatherDevice);
provide("removeWeatherDevice", removeWeatherDevice);
provide("addYouPianDevice", addYouPianDevice);
provide("removeYouPianDevice", removeYouPianDevice);
provide("addAirspace", addAirspace);
provide("hideAirspace", hideAirspace);
provide("createWindy", createWindy);
provide("closeWeather", closeWeather);
provide("closeWindy", closeWindy);
provide("addDrone", addDrone);
provide("removeDrone", removeDrone);
provide("addPlane", addPlane);
provide("removePlane", removePlane);
provide("addMHPlane", addMHPlane);
provide("removeMHPlane", removeMHPlane);
provide("heatMap", heatMap);
// provide("closeHeatMap", closeHeatMap);
provide("precipitation", precipitation);
// provide("closePrecipitation", closePrecipitation);
provide("hideRoad", hideRoad);
provide("showRoad", showRoad);
provide("windPowerShow", windPowerShow);
provide("isShowDetail", isShowDetail);
provide("changeIsShowDetail", changeIsShowDetail);
provide("routeVisibleClose", routeVisibleClose);
provide("routeClick", routeClick);

// ----------------------------------------------    生命周期   -------------------------------------------------------

onBeforeMount(() => {
  // 获取机构信息
  cockpitStore.getCompanyAsync();
  // 获取机场信息
  cockpitStore.getAirportAsync(0);
  cockpitStore.getAirportAsync(1);
  cockpitStore.getAirportAsync(2);
  cockpitStore.getAirportAsync(3);
  // 航线统计
  // cockpitStore.getAirouteAsync();
  // 获取在飞航线数据
  cockpitStore.getTHAirline();
  cockpitStore.getUAVAirline();
  cockpitStore.getOtherAirline();
  // 获取设备列表
  cockpitStore.getDeviceList();
  // 执行架次统计
  // cockpitStore.getExecuteData();
  // 执行架次统计
  // cockpitStore.getAircraftData();
  cockpitStore.getDetectData();
  // 飞行计划统计
  // cockpitStore.getFlyPlanData();
  // 今日报警数量
  cockpitStore.getTodayAlarmNum();
  // 获取已开启的告警类型
  mqttStore.getAlarmType();
  // 获取机场天气数据
  // cockpitStore.getAirportWeatherFun();
});

onMounted(() => {
  // initialization();
  setTimeout(init, 3000);
  // 监听 mqtt 信息防止three未加载导致绘制图形图标报错
  setTimeout(mqttMsg, 3500);
  // 初次加载时获取当前在飞的所有飞行器数据
  setTimeout(getAllDrone, 4000);

  window.addEventListener("resize", windowResize);
  // requestFullScreen();
  weather();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", windowResize);
  clearInterval(updateInterval);
  stopConnect();
  if (viewer.value) viewer.value.viewer.destroy();
});
</script>

<style scoped lang="scss">
.criterion-box {
  background-color: #fff;
  position: absolute;
  bottom: 80px;
  left: 80px;
  width: 200px;
  height: 400px;
  z-index: 1000;
}

.skipBtn {
  width: 92px;
  height: 40px;
  background: #000000;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.5;
  position: absolute;
  z-index: 1000;
  right: 40px;
  top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.immediatelyClass {
  width: 100%;
  height: 100%;
  position: absolute;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: bounce_scale_1 0.8s ease-out;

  .arrowAll {
    width: 258px;
    height: 295px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
  }

  .arrowAllLeft {
    -webkit-animation: move_4 1s infinite;
  }

  @-webkit-keyframes move_4 {
    0% {
      -webkit-transform: translateX(-100px);
      opacity: 0;
    }
  }

  .arrowAllRight {
    -webkit-animation: move_5 1s infinite;
  }

  @-webkit-keyframes move_5 {
    0% {
      -webkit-transform: translateX(100px);
      opacity: 0;
    }
  }
}

@-webkit-keyframes bounce_scale_1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  40% {
    -webkit-transform: scale(0.9);
  }
  55% {
    -webkit-transform: scale(1);
  }
  70% {
    -webkit-transform: scale(0.98);
  }
  85%,
  100% {
    -webkit-transform: scale(1);
  }
}

.markCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cockpit {
  //position: relative;
  //width: 100%;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;

  .waringShowViewClass {
    z-index: 100;
    border-radius: 4px;
    width: 260px;
    min-height: 109px;
    position: absolute;
    right: 8%;
    top: 30%;
    background-color: rgba(9, 27, 35, 0.8);
    animation: rotate 3s linear infinite;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    :deep .el-radio.el-radio--large .el-radio__label {
      color: white;
    }

    :deep .el-checkbox.el-checkbox--large .el-checkbox__label {
      color: white;
    }
  }
  .devicedialog {
    z-index: 100;
    border-radius: 4px;
    width: 240px;
    height: 180px;
    position: absolute;
    right: 8%;
    top: 8%;
    background-color: rgba(9, 27, 35, 0.8);
    animation: rotate 3s linear infinite;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #ffffff;
    padding: 10px;
    .top {
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      align-items: center;
      color: #00dde1;
      height: 20%;
      .close {
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
    .bottom {
      font-size: 12px;
      height: 80%;
      .bottom-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 25%;
        border-bottom: 1px dashed #314b5a;
      }
      .bottom-item:last-child {
        border-bottom: none;
      }
    }

    :deep .el-radio.el-radio--large .el-radio__label {
      color: white;
    }

    :deep .el-checkbox.el-checkbox--large .el-checkbox__label {
      color: white;
    }
  }
  .waringShowViewClass-item {
    cursor: pointer;
    position: relative;
    color: #daf0fb;
    font-size: 14px;
    background-color: #072a33;
    padding: 0 10px 0;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    .item-img {
      position: absolute;
      top: 4px;
      right: 10px;
      margin-left: 35px;
    }
  }
  .groupstyle {
    padding-left: 20px;
  }
  .active {
    color: #02f0fb;
  }

  #heatMap {
    width: 500px;
    height: 500px;
    position: absolute;
    z-index: 1000;
    top: 0;
  }

  .cockpit-left {
    position: absolute;
    top: 0;
    width: 320px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 2;
  }

  .cockpit-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 2;
  }

  .windDraw {
    width: 500px;
    height: 500px;
    background: url("/img/windTrends.png");
  }

  .compass {
    position: absolute;
    pointer-events: none;
    width: 80px;
    height: 78px;
    bottom: 40%;
    left: 3.7%;
    opacity: 0.6;
    background: url("/img/compass.png");
  }

  .mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/img/cockpit/mark.png");
    z-index: 5;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    //overflow: hidden;
    z-index: 1;
  }

  // .btn {
  //   position: absolute;
  //   top: 50%;
  //   left: 10%;
  //   z-index: 888;
  // }

  .helpCard {
    position: absolute;
    top: 7%;
    right: 4%;
    z-index: 100;
    width: 219px;
    height: 154px;
    background-color: rgba(9, 27, 35, 0.8);
    //background-color: rgba(9, 27, 35, 0.8);
    //border: 0.6px rgba(255, 255, 255, 0.6) solid;
    backdrop-filter: blur(5px);
    border-radius: 4px;
    -webkit-backdrop-filter: blur(5px);
    padding: 10px 20px;
    animation: rotate 3s linear infinite;

    .helpCard-content {
      display: flex;
      align-items: center;
      color: white;
      font-size: 16px;
      margin: 5px 0;

      .UAV1 {
        width: 26px;
        height: 26px;
        background: url("/img/cockpit/UAV1.png") no-repeat;
        background-size: contain;
        margin-right: 10px;
      }
      .UAV2 {
        width: 26px;
        height: 26px;
        background: url("/img/cockpit/UAV2.png") no-repeat;
        background-size: contain;
        margin-right: 10px;
      }
      .UAV3 {
        width: 26px;
        height: 26px;
        background: url("/img/cockpit/UAV3.png") no-repeat;
        background-size: contain;
        margin-right: 10px;
      }
      .UAV4 {
        width: 26px;
        height: 26px;
        background: url("/img/cockpit/UAV4.png") no-repeat;
        background-size: contain;
        margin-right: 10px;
      }
    }
  }
  .Warninginformation {
    position: absolute;
    top: 9%;
    left: 4%;
    z-index: 100;
    width: 240px;
    height: 400px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  #myDiv {
    width: 0;
    height: 0;
    opacity: 0; /* 初始状态为隐藏 */
    transition: all 2s ease; /* 过渡效果设置为0.5秒，使用ease缓动函数 */
  }
  #myDiv.show {
    opacity: 1; /* 显示时的状态 */
    width: 240px;
    height: 400px;
  }

  .Judgment {
    position: absolute;
    top: 62%;
    left: 4%;
    z-index: 100;
    width: 521px;
    height: 180px;
    padding: 0 20px;
    background: url(/img/cockpit/background2.png) no-repeat;
    background-size: 100% 100%;
    .title {
      color: #02d2df;
      font-size: 14px;
      padding-top: 10px;
    }
    .text {
      font-size: 14px;
      color: #ffffff;
    }
  }
  #myJud {
    width: 521px;
    height: 180px;
    opacity: 1; /* 初始状态为隐藏 */
    transition: all 2s ease; /* 过渡效果设置为0.5秒，使用ease缓动函数 */
  }
  #myJud.show {
    opacity: 1; /* 显示时的状态 */
    width: 521px;
    height: 180px;
  }

  .toHelp {
    position: absolute;
    top: 13px;
    right: 204px;
    z-index: 100;
    width: 25px;
    height: 25px;
    border-radius: 2px;
    border: none;
    background: url("/img/cockpit/help.png");
    // background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }

  .toFull {
    position: absolute;
    top: 13px;
    right: 159px;
    z-index: 100;
    width: 25px;
    height: 25px;
    border-radius: 2px;
    border: none;
    background: url("/img/cockpit/full.png");
    // background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }

  .isFull {
    background: url("/img/cockpit/cancelFull.png");
    // background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }

  .toDub {
    position: absolute;
    top: 13px;
    right: 112px;
    z-index: 100;
    width: 25px;
    height: 25px;
    border-radius: 2px;
    border: none;
    background: url("/img/cockpit/dub.png");
    // background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }

  .toHome {
    position: absolute;
    top: 13px;
    right: 63px;
    z-index: 100;
    width: 25px;
    height: 25px;
    border-radius: 2px;
    border: none;
    background: url("/img/cockpit/goBack.png");
    background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }
  .toFull.isSmall,
  .toDub.isSmall,
  .toHome.isSmall {
    top: 5px;
  }
}

:deep(.amap-marker-label) {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;

  .markerLabel {
    border: none;
    // width: 120px;
    padding: 0 3px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 0;
    font-size: 14px;
    background-color: rgba(0, 133, 19, 0.8);
    color: #fff;
  }
}

@keyframes rotate {
  0% {
    //border: 1px solid #44aeff;
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
  50% {
    border: 2px rgba(68, 174, 255, 0.4) solid;
  }
  100% {
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
}

.warningTop {
  position: absolute;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  animation: borderBlink 2s infinite;
  background: linear-gradient(
    to bottom,
    rgba(255, 0, 0, 0.7),
    rgba(0, 0, 0, 0)
  );
}
.warningLeft {
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  animation: borderBlink 2s infinite;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.warningRight {
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
  animation: borderBlink 2s infinite;
  background: linear-gradient(to left, rgba(255, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.warningBottom {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  animation: borderBlink 2s infinite;
  background: linear-gradient(to top, rgba(255, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

@keyframes borderBlink {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}
</style>
<style lang="scss">
#waringShowViewClass {
  .el-checkbox-group {
    .el-checkbox.el-checkbox--large {
      .el-checkbox__inner {
        border-radius: 50% !important;
        // border: 2px solid #409eff;
        width: 14px;
        height: 14px;
        background-color: #fff;
        padding: 0;
        margin-right: 10px;
      }

      // .el-checkbox__input.is-checked {
      //   .el-checkbox__inner {
      //     background-color: #409eff;
      //     border-color: #409eff;
      //   }
      // }
    }
  }

  .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
    background: transparent;
    &::after {
      content: "";
      position: absolute;
      display: block !important;
      background-color: #02f0fb !important;
      height: 4px !important;
      width: 4px !important;
      border-radius: 2px;
      border: 1px solid #02f0fb;
      transform: translate(-1px, 2.5px);
    }
  }
}
</style>

<style>
.custom-content-marker {
  position: relative;
  width: 100px;
  height: 75px;
  /* background: url("/img/cockpit/redpoint.png") no-repeat; */
  background: url("/img/cockpit/Crash.png") no-repeat;
  background-size: 100% 100%;
}

#light {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10000;
  background: transparent;
  animation: light-animate 600ms ease-out 20 alternate;
}

@keyframes light-animate {
  0% {
    box-shadow: inset 0 0 200px rgba(255, 0, 0, 0.8),
      inset 0 0 200px rgba(255, 0, 0, 0.1);
  }
  50% {
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.8),
      inset 0 0 100px rgba(255, 0, 0, 0.4);
  }
  100% {
    box-shadow: inset 0 0 200px rgba(255, 0, 0, 0.9),
      inset 0 0 200px rgba(255, 0, 0, 0.7);
  }
}

@keyframes moveAndFade {
  0% {
    transform: translateX(-450%) rotate(-720deg);
    opacity: 1;
  }
  80% {
    transform: translateX(-10%) rotate(359deg);
    opacity: 0.5;
  }
  100% {
    transform: translateX(40%) rotate(720deg);
    opacity: 0;
  }
}
.animation-block {
  animation: moveAndFade 3s linear forwards;
}
</style>
